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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JSON相关知识汇总
Jul 03 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 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
提问的智慧(2)
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
基于Python函数和变量名解析
2019/07/19 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
使用Python构造hive insert语句说明
2020/06/06 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
食品安全汇报材料
2014/08/18 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
防汛工作情况汇报
2014/10/28 职场文书
工作收入证明范本
2015/06/12 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers