IE浏览器图片onload事件失效的修复方案

作者:窗边听雨

时间:2026-10-28

浏览:623

本文分析IE浏览器中图片onload事件无法触发的原因,指出这是由于图片从缓存加载速度过快,导致事件监听器注册前图片已加载完毕。通过调整代码顺序,先绑定onload事件再设置src属性,可有效解决该兼容性问题,确保loading类正确移除。

文章目录

故事模式下的图片加载逻辑

故事模式的实现逻辑是仅加载当前浏览的照片及其下方的两张照片。在加载图片的过程中,才会同步加载并渲染评论区。在图片尚未加载完成前,系统会显示一个一像素的透明图片作为占位符,并通过添加loading类来展示加载背景图。当判断图片进入可视区域时,系统会将其替换为真实图片,并在图片加载成功后移除loading类。

IE浏览器中onload失效的问题

问题出现在代码的最后部分。测试时发现,在IE浏览器环境下,loading类无法被成功移除。当时的代码如下:

代码如下:

img.src = _src;
img.src = _src;
img.onload = function(){
_con.delClass('loading');
}

修正代码顺序的解决方案

经过网络搜索发现,onload事件监听器的定义与src属性的赋值语句顺序需要互换。在IE浏览器中,若图片已从缓存加载,直接设置src属性会导致onload事件根本不会触发,Opera浏览器也存在类似情况。修改后的正确代码如下:


代码如下:

img.onload = function(){
_con.delClass('loading');
};
img.src = _src;

调整后,页面显示立即恢复正常。

原理分析与浏览器差异

结论:应当将onload事件的绑定代码写在设置src属性之前,即先告知浏览器图片加载完成后的处理逻辑,再触发图片加载。因此,并非IE浏览器不会触发onload事件,而是因为缓存加载速度过快,在注册事件监听器之前,图片已经加载完毕。反之,Firefox浏览器表现更为智能,当加入onload事件后,它会检测缓存中是否已有该图片,若有则直接触发该事件。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章