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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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创建PDF中文文档
2006/10/09 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
关于php开启错误提示的总结
2019/09/24 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
python如何获取服务器硬件信息
2017/05/11 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
python脚本定时发送邮件
2020/12/22 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
百度JavaScript笔试题
2015/01/15 面试题
精彩广告词大全
2014/03/19 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
财务会计实训报告
2014/11/05 职场文书
师德师风事迹材料
2014/12/20 职场文书
高中生毕业评语
2014/12/30 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Python实现双向链表基本操作
2022/05/25 Python