IE中图片的onload事件无效问题和解决方法


Posted in Javascript onJune 06, 2014

在web开发在获取图片宽高是很正常的事情,图片在加载完成前是获取不到图片的宽高的,在加载完成后才可以获取图片本身的宽高,例如:

var img = new Image();
img.src = "loading.gif";
img.onload = function(){
 alert ( img.width );
};

OK?这段代码看着没什么问题,但在ie中会有一个bug,就是ie第一次打开的时候没问题,第二次使用这个方法就悲剧了,ie没反应了,即使刷新页面也是一样。因为IE会缓存图片,第2次加载的图片,不是从服务器上传过来的,而是从缓冲区里加载的。
先写onload方法,再指定这张图片的URL,这样就正常了。所以,不是IE没有触发onload事件,而是因为加载缓冲区的速度太快,以至于没有运行到img.onload的时候,onload事件已经触发了。这样就OK了。

var img = new Image();
img.onload = function(){
 alert ( img.width );
};
img.src = "loading.gif";
Javascript 相关文章推荐
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
jQuery插件分享之分页插件jqPagination
Jun 06 #Javascript
javascript中的return和闭包函数浅析
Jun 06 #Javascript
seaJs的模块定义和模块加载浅析
Jun 06 #Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 #Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 #Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 #Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
destoon官方标签大全
2014/06/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php日期操作技巧小结
2016/06/25 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python多线程http压力测试脚本
2019/06/25 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
python定义具名元组实例操作
2021/02/28 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
.net C#面试题
2012/08/28 面试题
社区党总支书记先进事迹材料
2014/01/24 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
社区禁毒工作方案
2014/06/02 职场文书
见习期个人总结
2015/03/05 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
小兵张嘎观后感
2015/06/03 职场文书
负责培养人意见
2015/06/05 职场文书
公司新员工欢迎词
2015/09/30 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python