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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 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
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
python多进程控制学习小结
2018/10/31 Python
手写一个python迭代器过程详解
2019/08/27 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
学前教育专业求职信
2014/09/02 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
小平您好观后感
2015/06/09 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android