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

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事件确实不是 泡沫。在2级DOM事件指定它应该，但在DOM Level 3的活动将覆盖此。

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

阿伦·P·约翰尼（Arun P Johny）证实了我的怀疑，这window.onerror是不可行的。

此事件在带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 );
}