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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
javascript生成随机数的方法
May 16 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Javascript模块模式分析
2008/05/16 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python浪漫表白源码
2019/04/05 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python怎么自定义捕获错误
2020/06/29 Python
python绘制分布折线图的示例
2020/09/24 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
网页美工求职信范文
2014/04/17 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
大学军训口号大全
2015/12/24 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers