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 相关文章推荐
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
js中生成map对象的方法
Jan 09 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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多用户读写文件冲突的解决办法
2013/11/06 PHP
10款实用的PHP开源工具
2015/10/23 PHP
Yii2如何批量添加数据
2016/05/17 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
经贸日语毕业生自荐信
2013/11/03 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
党员干部学习心得体会
2016/01/23 职场文书