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 相关文章推荐
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
PHP基本语法实例总结
2016/09/09 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python中set常用操作汇总
2016/06/30 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
50岁生日感言
2014/01/23 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
标准版离职证明书
2014/09/12 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android