Question

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

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

但是，当我将其绑定到document时，没有任何反应。控制台中也没有错误。

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

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

Answer 1

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

Answer 2

您可以使用useCapture的{{1}}来完成此操作。

addEventListener

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

2 个答案: