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对象的property和prototype是什么一种关系
Aug 06 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
Vue ​v-model相关知识总结
Jan 28 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
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python实现随机爬山算法
2021/01/29 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
西安众合通用.net笔试题
2013/03/18 面试题
银行演讲稿范文
2014/01/03 职场文书
公司应聘求职信
2014/06/21 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
地理科学专业自荐信
2014/09/01 职场文书
擅自离岗检讨书
2014/09/12 职场文书
研究生简历自我评
2015/03/11 职场文书
社区结对共建协议书
2016/03/23 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Win2008系统搭建DHCP服务器
2022/06/25 Servers
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技