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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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
星际实力自我测试
2020/03/04 星际争霸
PHP函数学习之PHP函数点评
2012/07/05 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JS跨域代码片段
2012/08/30 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
python简单获取数组元素个数的方法
2015/07/13 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
三行辞职书范文
2015/02/26 职场文书
东京审判观后感
2015/06/01 职场文书
执行力心得体会范文
2016/01/11 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python