Question

我知道我可以使用jQuery处理丢失的图像错误：

$('img').on('error', function() {
    var $this = $(this);
    $this.attr('src', '/image-placeholder.svg');
});

这适用于页面加载。但是，我有一个Ajax调用，它返回要放在页面上的HTML字符串。 HTML中还包含可能缺少的图像。 对于Ajax情况，上面的代码不起作用：丢失的资源正在抛出404，但它们不会被占位符替换。我试图使用事件委托，但没有运气：

$(document).on('error', 'img', function() {
    var $this = $(this);
    $this.attr('src', '/image-placeholder.svg');
});

有没有办法在通过Ajax响应返回之后处理丢失的资源？

我的Ajax调用使用$.get()方法。

Answer 1

加载事件不会冒泡，因此您无法委派事件，您可以在将html附加到页面后再次绑定错误事件

Answer 2

您可以为所有图像加载错误注册一个全局处理程序（您需要使用捕获侦听器）：

document.body.addEventListener(
    'error',
    function(event){
        var target = event.target;
        if( target.tagName == 'IMG'){
         console.log("your code here");
        }
    },
    true // <-- useCapture
)

在Ajax调用期间处理丢失的图像资源

2 个答案: