如何监听所有图像的错误事件？

Question

我想隐藏动态加载的损坏图像。对于静态的，这是可行的。

$('img').error(function() {
    $(this).css({ 'visibility': 'hidden' });
});

但是，当我将其绑定到 document 时，什么也没有发生。控制台也没有错误。

$(document).on('error', 'img', function() {
    $(this).css({ 'visibility': 'hidden' });
});

如何监听动态加载的图片错误？

Answer 1

您可以使用useCapture 的addEventListener 来做到这一点。

document.addEventListener('error', (e) => {
  // do your magic here
}, true)

Answer 2

error 事件不会 冒泡。 DOM Level 2 Events 指定它应该，但 The DOM Level 3 Events 会覆盖它。

您可以尝试window.onerror，但我不确定这是否只会捕获代码中的运行时脚本错误或资源失败引发的错误。如果它有效，它也会捕获所有错误。

Arun P Johny 证实了我的怀疑，window.onerror 是不行的。

此事在error event with live讨论。

解决方案可能是在所有图像上添加通用错误处理程序，包括动态加载的图像。然后让该通用错误处理程序触发自定义 jQuery 事件，例如：

$( document ).on( 'imgerror', function ( event, originalEvent ) {
    // originalEvent is the error event
} );

function genericImgOnError( event ) {
    $( event.target ).trigger( 'imgerror', event );
}

function getImg( src ) {
    return $( '<img/>', {
        src: src,
    } ).on( 'error', genericImgOnError );
}