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中noConflict()用法实例分析
Feb 08 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
canvas实现图像截取功能
Feb 06 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue组件中slot的用法
Jan 30 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
九种原生js动画效果
2015/11/11 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python Trie树实现字典排序
2014/03/28 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
用python实现的线程池实例代码
2018/01/06 Python
python实现周期方波信号频谱图
2018/07/21 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
厂长助理岗位职责
2013/12/27 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
对孩子的寄语
2014/04/09 职场文书
综合实践活动总结
2014/05/05 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
秋季运动会加油词
2015/07/18 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android