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 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JS实现留言板功能
Jun 17 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP实现的简单日历类
2014/11/29 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
遗传算法python版
2018/03/19 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Flask之请求钩子的实现
2018/12/23 Python
Python创建字典的八种方式
2019/02/27 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
自强之星事迹材料
2014/05/12 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
详解Python函数print用法
2021/06/18 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
MySQL 数据类型详情
2021/11/11 MySQL