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

我想替换所有

下面是一个jsFiddleDemo：
JSFIDLE中的性能非常糟糕，在生产中更好

我想知道是否有更聪明的方法来解决此问题。
您可以捕获“onerror”事件，但似乎没有更优化：

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

我想这没问题。为了使它看起来更好，你可以增加高度和宽度，以使它看起来更少。。。嗯，你知道；）令人惊讶的是，这看起来非常圆滑，并且没有向每个节点添加事件侦听器。非常好，谢谢！
$(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")
        });
    }
});

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
);