所有浏览器的图像加载时的JavaScript/jQuery事件监听器

Question

我正在寻找一种方法来实现尽可能多的浏览器:

var image = new Image();
image.addEventListener("load", function() {
                               alert("loaded");
}, false);
image.src = "image_url.jpg";

这在IE中不起作用所以我用Google搜索并发现IE低于9不支持.addEventListener().我知道有一个jQuery等价物被调用,.bind()但这不适用于Image().为了在IE中工作,我还需要改变什么？

Answer 1

IE支持attachEvent.

image.attachEvent("onload", function() {
    // ...
});

使用jQuery,你可以写

$(image).load(function() {
    // ...
});

当涉及到事件时,如果你有可能使用jQuery我建议使用它,因为它将负责浏览器兼容性.您的代码适用于所有主流浏览器,您不必担心这一点.

另请注意,为了在IE中触发加载事件,您需要确保不会从缓存加载图像,否则IE将不会触发加载事件.

为此,您可以在图像的URL末尾附加一个虚拟变量,就像这样

image.setAttribute( 'src', image.getAttribute('src') + '?v=' + Math.random() );

使用jQuery加载方法的一些已知问题是

与图像一起使用时加载事件的注意事项

开发人员尝试使用.load()快捷方式解决的常见挑战是在图像(或图像集合)完全加载时执行函数.应该注意有几个已知的警告.这些是:

• 它不能一致地工作,也不能可靠地跨浏览器
• 如果图像src设置为与之前相同的src,则它在WebKit中无法正确触发
• 它没有正确地冒泡DOM树
• 可以停止为已经存在于浏览器缓存中的图像触发

有关更多信息,请参阅jQuery文档.

Answer 2

你必须使用.attachEvent()而不是.addEventListener().

if (image.addEventListener) {
  image.addEventListener('load', function() {
       /* do stuff */ 
  });
} else {
  // it's IE!
  image.attachEvent('onload', function() {
    /* do stuff */
  });
}