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 相关文章推荐
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
vue 递归组件的简单使用示例
Jan 14 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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
php图像验证码生成代码
2017/06/08 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
js代码编写无缝轮播图
2020/09/13 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python复制文件操作实例详解
2015/11/10 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
读书心得体会
2013/12/28 职场文书
亚运会口号
2014/06/20 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js