Замена нерабочих изображений с помощью 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.

Полезные материалы

1. Событие error | jQuery API Документация — тут можно найти 🦄 обработку ошибок в jQuery.
2. Событие error окна – Веб-API | MDN — подробное описание события 'error' в JavaScript.
3. Руководство по синтаксису адаптивных изображений в HTML | CSS-Tricks — гайд идеального использования изображений без привлечения профессионального оборудования.
4. Стандарт HTML — информация по тегу 'img' в HTML.
5. jQuery/JavaScript: как заменить недоступные изображения – Stack Overflow — площадка для обсуждения и дележа опытом по данной проблеме.
6. HTML-тег img — обучающие материалы по использованию тега 'img'.
7. .on() | jQuery API Документация — подробная информация о методе jQuery '.on()' для обработки различных событий на высоком уровне.