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浏览器会检测缓冲区是否已经有此图片，有的话直接就触发此事件！
相关文章
这篇文章主要介绍了js实现显示当前状态的导航效果代码,涉及javascript通过鼠标点击事件动态改变页面元素属性的相关实现技巧,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了js+SVG实现动态时钟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要给大家介绍了关于js高精度计算decimal.js库用法的相关资料,decimal.js是使用的二进制来计算的,所以能解决js的精度问题,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面这篇文章主要给大家介绍了关于js中undefined该怎么判断的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了微信小程序倒计时功能实例代码,当单击按钮弹出一个半透明的弹出层，在规定时间内激活关闭按钮，关闭弹出层。需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了JavaScript实现环绕鼠标旋转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了JS验证IP，子网掩码，网关和MAC的方法,涉及javascript正则表达式的相关使用技巧,需要的朋友可以参考下2015-07-07
NodeJs中的非阻塞方法介绍，需要的朋友可以参考下2012-06-06
这篇文章主要给大家介绍了关于javascript中导出与导入实现模块化管理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
闭包的功能强大，但如果没有正确理解闭包的概念，其结果往往出乎人的意料。例如，下面是一个较常见的问题2009-03-03
最新评论