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的location.href跳出框架打开新页面的方法
Sep 04 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
截获网站title标签之家内容的例子
2006/10/09 PHP
php实现的验证码文件类实例
2015/06/18 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解vue-cli3使用
2018/08/14 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python实现封装得到virustotal扫描结果
2014/10/05 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python实现名片管理系统
2018/11/29 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python多进程并发demo实例解析
2019/12/13 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
建筑项目策划书
2014/01/13 职场文书
爱护公共设施标语
2014/06/24 职场文书
少先队工作总结2015
2015/05/13 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Redis批量生成数据的实现
2022/06/05 Redis