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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python绘制圆柱体的方法
2018/07/02 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
linux面试题参考答案(11)
2016/11/26 面试题
J2EE相关知识面试题
2013/08/26 面试题
趣味比赛活动方案
2014/02/15 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
村居抓节水倡议书
2014/05/19 职场文书
计算机毕业生求职信
2014/06/10 职场文书
小学生校园广播稿
2014/09/28 职场文书
留学推荐信中文范文
2015/03/26 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
logback如何自定义日志存储
2021/08/30 Java/Android
如何在python中实现ECDSA你知道吗
2021/11/23 Python