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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
我的论坛源代码(四)
2006/10/09 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
php导出生成word的方法
2015/12/25 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python图片验证码生成代码
2016/07/02 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python中re模块知识点总结
2021/01/17 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
母婴店促销方案
2014/03/05 职场文书
师范大学生求职信
2014/06/13 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js