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的事件描述
Sep 08 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
js实现简单页面全屏
Sep 17 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
探寻PHP脚本不报错的原因
2014/06/12 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
用Python编写web API的教程
2015/04/30 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python查看微信好友是否删除自己
2016/12/19 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
房地产营销策划方案
2014/02/08 职场文书
上班看电影检讨书
2014/02/12 职场文书
益达广告词
2014/03/14 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书