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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 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数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
详细解读Python中解析XML数据的方法
2015/10/15 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python中类的属性和方法介绍
2018/11/27 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
django 消息框架 message使用详解
2019/07/22 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
用python对oracle进行简单性能测试
2020/12/05 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
国际贸易专业推荐信
2013/11/15 职场文书
学校门卫工作职责
2013/12/07 职场文书
法制宣传实施方案
2014/03/13 职场文书
食品采购员岗位职责
2014/04/14 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
四年级小学生评语
2014/12/26 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书