Обработка отсутствующих ресурсов изображения во время вызова Ajax

89
11

Я знаю, что я могу обрабатывать недостающую ошибку изображения с помощью 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().

спросил(а) 2021-01-25T17:05:47+03:00 4 месяца, 4 недели назад
1
Решение
63

Вы можете зарегистрировать глобальный обработчик для всех ошибок загрузки изображения (вам нужно использовать приемник захвата):


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

ответил(а) 2021-01-25T17:05:47+03:00 4 месяца, 4 недели назад
63

Событие загрузки не пузырится, поэтому вы не можете делегировать событие, вы можете связать событие ошибки снова после добавления html на страницу

ответил(а) 2021-01-25T17:05:47+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема