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

我正在寻找一种方式来实现这一尽可能多的浏览器越好：

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方法的一些已知问题

加载事件的警告与图像一起使用时
一个常见的挑战开发者尝试使用.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 */
  });
}

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 event listener on image load for all browsers