javascript - 如何以最佳性能接收未加载图像的错误事件

Question

我想替换 src所有属性 <img>某个元素中的元素尚未加载，因为未找到源 (404)。

这里有很多主题:

• > Check if an image is loaded (no errors) in JavaScript
• > jQuery or Javascript check if image loaded

大多数答案都会在等待 error 的图像上添加一个 eventListener事件。理想情况下，我们只是写这样的东西:

---

委托(delegate)事件监听器的

无效示例:

$("#element").on("error", "img", function(){
   console.log("hey, there was an error in this image: "+$(this));
})

Another user was kind enough to point this out.

这不起作用，因为 the error event seem not to bubble , 比如 click例如事件。

---

因此，有了这些知识，似乎唯一剩下的就是迭代每个图像并检查错误。

有什么意义 (tl;dr)？

我的问题是:使用 javascript(是的，您可以使用 jQuery)迭代某个对象的所有图像以查找错误的快速方法是什么。我所说的最快是指:迭代应该非常快，并且不应放置不必要的事件监听器(我的问题)。

这是我的示例代码:

$(function(){
    var $element = $("#element");
    var replaceImgSrc = "http://www.placehold.it/100x100&text=replaced";
    var allImages = $element.find("img");

    for (var i = 0; i < allImages.length; i++) {
        $(allImages[i]).one('error', function () {
            $(this).attr("src", replaceImgSrc).addClass("not-loaded")
        });
    }
});

这是一个 jsFiddleDemo:http://jsfiddle.net/qq2ccx05/ jsFiddle 中的性能很糟糕，但在生产中更好。

我想知道是否有更聪明的方法来解决这个问题。

Answer 1

您可以捕获“onerror”事件，但似乎并没有真正优化:

var replaceImgSrc = "http://www.placehold.it/100x100&text=replaced";
$('#element')[0].addEventListener(
    'error',
    function(event){
        var elm = event.target;
        if( elm.tagName == 'IMG'){
            elm.src = replaceImgSrc;
        }
    },
    true // Capture event
);

jsFiddle