Лучшая обработка битых изображений - CSS-хитрости

Anonim

Отсутствующие изображения либо просто ничего не отображают, либо отображают поле стиля (?), Если их источник не может быть найден. Вместо этого вы можете заменить его изображением «отсутствующее изображение», которое, как вы уверены, существует, чтобы получить лучшую визуальную обратную связь о том, что что-то не так. Или вы можете захотеть полностью скрыть это. Это возможно, потому что изображения, которые браузер не может найти, вызывают событие JavaScript «ошибки», за которым мы можем наблюдать.

// Replace source $('img').on("error", function() ( $(this).attr('src', '/images/missing.png.webp'); )); // Or, hide them $("img").on("error", function() ( $(this).hide(); ));

Кроме того, вы можете захотеть запустить какое-то действие Ajax для отправки электронного письма администратору сайта, когда это произойдет.