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

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

故事模式的实现逻辑是仅加载当前浏览的照片及其下方的两张照片。在加载图片的过程中，才会同步加载并渲染评论区。在图片尚未加载完成前，系统会显示一个一像素的透明图片作为占位符，并通过添加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事件后，它会检测缓存中是否已有该图片，若有则直接触发该事件。