IE浏览器中图片onload事件无效的解决方法


Posted in Javascript onApril 29, 2014

故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成真正的图片,图片加载成功后删除loading类。

问题出在最后面,测试的时候发现在IE下loading类无法删除,当时代码如下:

img.src = _src;
img.src = _src;
img.onload = function(){
   _con.delClass('loading');
}

网上找了一番,onload和定义src的语句应该换一下顺序,IE从缓存中取图片,onload根本不触发,opera也有这个毛病,正确代码修改如下
img.onload = function(){
   _con.delClass('loading');
};
img.src = _src;

立即就正常了

结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,有的话直接就触发此事件!

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
jQuery知识点整理
Jan 30 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
javascript的创建多行字符串的7种方法
Apr 29 #Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 #Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 #Javascript
JS实现两个大数(整数)相乘
Apr 28 #Javascript
关于img的href和src取变量及赋值的方法
Apr 28 #Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 #Javascript
JS计算网页停留时间代码
Apr 28 #Javascript
You might like
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python中list初始化方法示例
2016/09/18 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python 获取网页编码方式实现代码
2017/03/11 Python
Python实现的建造者模式示例
2018/08/06 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
校园摄影活动策划方案
2014/02/05 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
法制宣传月活动方案
2014/05/11 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
zabbix监控mysql的实例方法
2021/06/02 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python