在Ajax調用期間處理丟失的圖像資源

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

load事件不會冒泡，因此您不能委托該事件，您可以在將html附加到頁面后再次綁定錯誤事件。

Answer 2

您可以為所有圖像加載錯誤注冊一個全局處理程序（您需要使用捕獲偵聽器）：

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