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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
js计时事件实现圆形时钟
Mar 25 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
什么是MVC,好东西啊
2007/05/03 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python时间获取及转换知识汇总
2017/01/11 Python
Python对切片命名的实现方法
2018/10/16 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python中四舍五入的正确打开方式
2021/01/18 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS