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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 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
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python BS4库的安装与使用详解
2018/08/08 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python反编译学习之字节码详解
2019/05/19 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python进行统计建模
2020/08/10 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
七一表彰活动方案
2014/01/18 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
二手房购房意向书
2015/05/09 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python