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 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
vue 过滤器filter实例详解
Mar 14 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
SSI指令
2006/11/25 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
javascript实现微信分享
2014/12/23 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
记录Django开发心得
2014/07/16 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python关于反射的实例代码分享
2020/02/20 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
捷科时代的软件测试笔试题
2015/11/09 面试题
自主招生专家推荐信
2015/03/26 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015年教务工作总结
2015/05/23 职场文书
找规律教学反思
2016/02/23 职场文书
创业计划书之旅游网站
2019/09/06 职场文书