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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
JS处理一些简单计算题
Feb 24 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
SONY SRF-40W电路分析
2021/03/02 无线电
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
基于JQuery的多标签实现代码
2012/09/19 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
实例讲解python函数式编程
2014/06/09 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python实现合并字典的方法
2015/07/07 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python中while和for的区别总结
2019/06/28 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
《走一步再走一步》教学反思
2014/02/15 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书