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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
理解javascript异步编程
Jan 27 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 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
动易数据转成dedecms的php程序
2007/04/07 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
全面理解闭包机制
2016/07/11 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
node跨域请求方法小结
2017/08/25 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python实现的文件同步服务器实例
2015/06/02 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python 变量的创建过程详解
2019/09/02 Python
python中调试或排错的五种方法示例
2019/09/12 Python
使用python求解二次规划的问题
2020/02/29 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
幼儿园老师寄语
2014/04/03 职场文书
加入学生会演讲稿
2014/04/24 职场文书
铁路安全事故反思
2014/04/26 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
共青团员自我评价
2015/03/10 职场文书
质量承诺书格式范文
2015/04/28 职场文书