addEventListener（）不适用于Firefox中的图像

Question

我在我的javascript代码中创建了一个Image对象。我想为'load'事件附加一个处理程序到这个图像。我试图使用以下代码执行此操作，但从不调用处理程序方法。

var img = new Image();
img.src='some url';
img.addEventListener('load', function(){
      //do something
}, false);

我是做错了什么，还是有其他方法可以做到这一点？ 我已经尝试过img.onload但它对我没用。

Answer 1

在为src属性赋值之前添加事件侦听器。如果图片已在浏览器的缓存中，load事件可能会在设置src属性后立即发生。

此外，请确保将Image对象的引用保存到在下载映像之前不会自动销毁的变量。例如，如果在函数内实例化Image对象并在函数局部变量中保存对它的引用，则该对象可能在函数执行完成后立即自动销毁。要防止它，请在全局变量或全局对象的属性中保存对象的引用，如下所示：

window.example = {
    _images: []
};

example.preloadImage = function(url, callback) {
    var image = new Image;
    image.onload = callback;
    image.src    = url;

    // This prevents the image from destroying after the function is executed.
    example._images.push(image);
};

example.preloadImage('some-image.jpg', function() {
    alert('Image is loaded.');
});