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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 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相当简单的分页类
2008/10/02 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JavaScript简介
2015/02/15 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
jquery实现的分页显示功能示例
2019/08/23 jQuery
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
银行实习鉴定
2013/12/13 职场文书
老师自我鉴定范文
2013/12/25 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
参观邀请函范文
2015/02/02 职场文书
大学班干部竞选稿
2015/11/20 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
浅谈克隆 JavaScript
2021/11/02 Javascript