IE浏览器中图片onload事件无效的解决方法
更新时间：2014年04月29日 10:22:24 作者：
在做一个项目的时候才发现的这个bug，其实这是一个很常见的问题，只是之前对图片的处理太少，没有碰到过。
故事模式实现是只加载当前浏览的照片和它下面的两张照片，加载照片的时候才会加载和渲染评论区，图片没有加载前会用一个一象素的图片占位，并用一个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浏览器会检测缓冲区是否已经有此图片，有的话直接就触发此事件！
相关文章
Util.js文件包含了一些工具函数，来帮助人们使用JavaScript数据（例如从服务器返回的数据）来更新Web页面。有需要的小伙伴可以参考下2015-06-06
STL是一种用于表示3D模型表面的文件格式,通常由三角形面片组成,STL 文件可以是ASCII（文本）或二进制格式,其中二进制格式更为常见,因为它更紧凑且加载速度更快,本文给大家介绍了javascript加载导出 STL文件的示例,需要的朋友可以参考下2024-12-12
麦鸡的TAB切换功能代码2008-10-10
这篇文章主要介绍了JS烟花背景效果实现方法,实例分析了javascript操作dom元素实现烟花特效的技巧,需要的朋友可以参考下2015-03-03
文章主要介绍了梳理总结JavaScript的23个String方法,JavaScript 中的String类型用于表示文本型的数据。它是由无符号整数值作为元素而组成的集合,更多详细内容需要的朋友可以参考一下2022-07-07
console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下2024-07-07
平常设计表单的时候，我们会加入一些提示文字，最常见的做法是利用value来设置，下面与大家分享一个实例，感兴趣的朋友可以参考下哈2013-06-06
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
这篇文章主要介绍了一文秒懂JavaScript构造函数、实例、原型对象以及原型链的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
javascript高级模块化require.js的具体使用方法
本篇文章主要介绍了javascript高级模块化require.js的具体使用方法，非常具有实用价值，需要的朋友可以参考下2017-10-10
JavaScript实时监听localStorage变化的实现方法小结
很多时候,我们在A页面通过点击之类的操作获得一个数值,然后拿到B页面使用,我们希望这个值是响应式的,当然你可以使用vue或者react的实现,这篇文章适合想偷懒或者很多后端小伙不愿意去用的使用,效果是差不多的主要是适用于任何基于JavaScript的项目,需要的朋友可以参考下2024-06-06
最新评论