Javascript判断图片尺寸大小实例分析


Posted in Javascript onJune 16, 2014

通常我们判断js图片大小都是利用images对象,然后再用attr来获取图片地址再进行判断就可以了,下面来看一些例子。
最简单办法:

var img=new Image();
    img.src=$('#tlogo').attr('src');
    if(img.width > '240'){
        $('#tlogo').attr('width','240');
}

上面例子碰到如果页面没有加载完的时候,这时js就获取不了图片大小了,对此我们可以先判断加载完成否再判断图片大小。

<img id="img2" src="images/1.jpg" />
<script language="JavaScript">
    document.getElementById("img2").onload = function () {
        alert("图片加载已完成");
    }
</script>

或者采用jquery:

$("#imageId").load(function(){
   alert("加载完成!");
});

至此我们就可以对代码进行优化了

$("#tlogo").load(function(){
 var img=new Image();
        img.src=$('#tlogo').attr('src');
        if(img.width > '240'){
        $('#tlogo').attr('width','240');
}
});

此处注意:#tlogo 就是你图片地址中加的一个ID这个是必须的。

Javascript 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JQuery触发事件例如click
Sep 11 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
You might like
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
解析php入库和出库
2013/06/25 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
laravel安装和配置教程
2014/10/29 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vue实现弹幕功能
2019/10/25 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
爱情寄语大全
2014/04/09 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
Hive常用日期格式转换语法
2022/06/25 数据库