Question

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

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

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

Answer 1

IE支持attachEvent。

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

使用jQuery，你可以写

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

说到事件，如果你有可能使用jQuery我会建议使用它，因为它会照顾浏览器的兼容性。您的代码适用于所有主流浏览器，您无需担心。

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

为此，您可以在图片的网址末尾添加虚拟变量，例如

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

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

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

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


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为，则在WebKit中无法正确触发   和以前一样的src

它没有正确地冒泡DOM树

对于已经存在于浏览器中的图像，可以停止触发   高速缓存

有关详细信息，请参阅jQuery docs。

Answer 2

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

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

Answer 3

new Image基本上会返回<img>标记，因此您可以在jQuery中进行编码，如：http://jsfiddle.net/pimvdb/LAuUR/1/。

$("<img>", { src: '...' })
    .bind('load', function() {
        alert('yay');
    });

编辑，以便加载有效图片

$('.buttons').html('');

var range = [];
for (var i = 1; i <=50; i++) range.push(i);

range.forEach(function(i) {
  var img_src = 'http://i.imgur.com/' + i + '.jpg';
  var $img = $("<img>", {
    src: img_src
  });

  $img.on('load', function() {
    $('.buttons').append($img);
  });

  $img.on('error', function() {
  });

});

Answer 4

您可以使用attachEvent，但我更愿意您自己添加addEventListener侦听器。以下是用于添加事件侦听器的MDN链接上的代码：

if (!Element.prototype.addEventListener) {
    var oListeners = {};
    function runListeners(oEvent) {
        if (!oEvent) { oEvent = window.event; }
        for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
            if (oEvtListeners.aEls[iElId] === this) {
                for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
                break;
            }
        }
    }
    Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (oListeners.hasOwnProperty(sEventType)) {
            var oEvtListeners = oListeners[sEventType];
            for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
                if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
            }
            if (nElIdx === -1) {
                oEvtListeners.aEls.push(this);
                oEvtListeners.aEvts.push([fListener]);
                this["on" + sEventType] = runListeners;
            } else {
                var aElListeners = oEvtListeners.aEvts[nElIdx];
                if (this["on" + sEventType] !== runListeners) {
                    aElListeners.splice(0);
                    this["on" + sEventType] = runListeners;
                }
                for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
                    if (aElListeners[iLstId] === fListener) { return; }
                }           
                aElListeners.push(fListener);
            }
        } else {
            oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
            this["on" + sEventType] = runListeners;
        }
    };
    Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (!oListeners.hasOwnProperty(sEventType)) { return; }
        var oEvtListeners = oListeners[sEventType];
        for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
            if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
        }
        if (nElIdx === -1) { return; }
        for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
            if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
        }
    };
}

Answer 5

现在最好的方法是使用jQuery和jQuery插件imagesLoaded而不是jQuery的内置load()或普通JS。该插件负责jQuery文档引用的各种浏览器怪癖，即关于缓存的图像，并在新图像的src相同时重新触发回调。只需下载jquery.imagesloaded.min.js，然后将其添加到<script src="jquery.imagesloaded.min.js"></script>，就可以了：

$(image).imagesLoaded(function() {
    alert("loaded");
});

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

5 个答案: