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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
javascript 解析url的search方法
Feb 09 Javascript
Cookie 小记
Apr 01 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
node网页分段渲染详解
Sep 05 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
编写一个javascript元循环求值器的方法
Apr 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
Laravel框架分页实现方法分析
2018/06/12 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
js select常用操作控制代码
2010/03/16 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
浅析Python函数式编程
2018/10/06 Python
对python函数签名的方法详解
2019/01/22 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
MIS软件工程师的面试题
2016/04/22 面试题
团员的自我评价
2013/12/01 职场文书
分层教学实施方案
2014/03/19 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
大学生入党自荐书
2015/03/05 职场文书
在js中修改html body的样式
2021/11/11 Javascript