所有浏览器的图像加载的JavaScript / jQuery事件监听器
我正在寻找一种方法来实现尽可能多的浏览器：
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中工作，我还需要改变什么？
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文档 。
您必须使用.attachEvent()而不是.attachEvent() .addEventListener() 。
if (image.addEventListener) { image.addEventListener('load', function() { /* do stuff */ }); } else { // it's IE! image.attachEvent('onload', function() { /* do stuff */ }); }
new Image基本上返回一个
$("![]()
", { 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 = $("![]()
", { src: img_src }); $img.on('load', function() { $('.buttons').append($img); }); $img.on('error', function() { }); });
你可以使用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); } } }; }
现在最好的方法是使用jQuery和jQuery插件imagesLoaded而不是jQuery的内置load()或普通JS。 该插件负责jQuery文档引用的各种浏览器怪癖，即关于缓存的图像，并在新图像的src相同时重新触发回调。 只需下载jquery.imagesloaded.min.js ，用添加它，你就可以了：
$(image).imagesLoaded(function() { alert("loaded"); });