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调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
js+html实现点名系统功能
Nov 05 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
Vue Element plus使用方法梳理
Dec 24 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.MVC的模板标签系统(二)
2006/09/05 PHP
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python实现简单爬虫功能的示例
2016/10/24 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
精细化工应届生求职信
2013/11/17 职场文书
大学生励志演讲稿
2014/04/25 职场文书
期末评语大全
2014/05/04 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2016消防宣传标语口号
2015/12/26 职场文书