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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
详解javascript void(0)
Jul 13 Javascript
使用Vue实现一个树组件的示例
Nov 06 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笔记 字符串处理
2010/10/19 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
PHP重定向的3种方式
2013/03/07 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
Python异常处理操作实例详解
2018/05/10 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
django迁移文件migrations的实现
2020/03/31 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
资产评估专业大学生求职信
2013/09/29 职场文书
前处理组长岗位职责
2014/03/01 职场文书
安全第一课观后感
2015/06/18 职场文书
开学第一周值周总结
2015/07/16 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
浅谈Python中的正则表达式
2021/06/28 Python