Замена нерабочих изображений с помощью jQuery и JavaScript
Быстрый ответ
Ситуацию с недоступными изображениями можно быстро и просто решить с помощью следующего кода на jQuery. Здесь используется обработчик события error()
, при помощи которого организовывается замена атрибута src
на изображение-замену, воспользовавшись методом .attr()
:
$("img").on("error", function() {
$(this).attr("src", "default.png");
});
Таким образом, если загрузка изображения неудачна, его источник заменяется на "default.png", что позволяет сохранить цельность визуального контента вашего сайта.
Пикассо в эпоху 4G: реагирование на недоступность изображений
Если возникнут трудности с загрузкой изображения, вы всегда сможете выбрать изящный стандбай путем использования атрибута onerror
на элементе img
. При его активации в случае ошибки вызывается JavaScript-обработчик событий.
Пример на чистом JavaScript, подход по Джеффу Безосу
Не увлекаетесь jQuery? Стремитесь к независимости? Держите реализацию на чистом JavaScript:
document.addEventListener("DOMContentLoaded", function() {
var imgElements = document.getElementsByTagName('img');
for(var i = 0; i < imgElements.length; i++) {
imgElements[i].onerror = function() {
this.src = 'default.png';
this.onerror = null; // Чтобы предотвратить бесконечный цикл
};
}
});
Внимание на this
!
Здесь ключевое слово this
выступает в роли лазерного прицела, моментально нацеливаясь на проблемное изображение.
Стоп бесконечным циклам
Никто не обрадуется бесконечным циклам, особенно если даже заменитель изображения отсутствует. Строчка img.onerror = null;
позволяет обработчику ошибок перестать работать тогда, когда на сцену выходит изображение-заменитель.
Навигация по браузерам
Браузеры могут вести себя по-разному при загрузке изображений, словно капризные дети во время семейного ужина. Тестирование в различных браузерах гарантирует, что галерея изображений будет корректно отображаться везде.
Визуализация
Возьмем для примера галерею изображений, где часть из них оказалась недоступной.
Галерея недоступных изображений (🖼️): [🌄, 🌅, 🚫, 🌇]
// 🚫 представляет собой недоступное изображение
С помощью JavaScript вы можете вмешаться в ситуацию:
$('img').on('error', function(){
$(this).attr('src', 'placeholder.jpg');
});
И мы получим обновленную галерею:
Обновлённая галерея (🖼️): [🌄, 🌅, 🔗, 🌇]
// 🔗 – это наше изображение-заменитель
Примечание: Выбор изображения-заменителя (🔗) играет важную роль в создании гармоничного сочетания основного и альтернативного контента галереи.
Старые методы не всегда лучшие: jQuery error()
Если вы по-прежнему используете jQuery 1.8, рекомендуется отказаться от устаревшего метода .error(handler)
в пользу .on('error', handler)
. Такие небольшие изменения делают ваш код более современным.
Больше простоты: делегирование событий не всегда нужно
Рекомендуется привязывать обработчики ошибок непосредственно к элементам img
, чтобы избегать ненужной сложности.
Для энтузиастов: DOM-Level-2-Events и quirksmode.org
Если вам нравится погрузиться в детали, ресурсы как DOM-Level-2-Events и quirksmode.org помогут удовлетворить ваше любопытство по поводу JavaScript.
Полезные материалы
- Событие error | jQuery API Документация — тут можно найти 🦄 обработку ошибок в jQuery.
- Событие error окна – Веб-API | MDN — подробное описание события 'error' в JavaScript.
- Руководство по синтаксису адаптивных изображений в HTML | CSS-Tricks — гайд идеального использования изображений без привлечения профессионального оборудования.
- Стандарт HTML — информация по тегу 'img' в HTML.
- jQuery/JavaScript: как заменить недоступные изображения – Stack Overflow — площадка для обсуждения и дележа опытом по данной проблеме.
- HTML-тег img — обучающие материалы по использованию тега 'img'.
- .on() | jQuery API Документация — подробная информация о методе jQuery '.on()' для обработки различных событий на высоком уровне.