Решение проблемы отображения альтернативных изображений

Быстрый ответ

Для отображения запасного изображения в случае ошибки загрузки основного в HTML используйте атрибут onerror, который заменяет src на URL альтернативного изображения:

<img src="original.jpg" onerror="this.src='fallback.jpg'; this.onerror=null;" alt="">

Замечания:

• onerror активируется, когда не получается загрузить изображение.
• Выражение "this.src='fallback.jpg'; this.onerror=null;"** переключает исходное изображение на запасное и обнуляетonerror` для предотвращения зацикливания.
• Это эффективное и простое решение для обработки ситуаций, когда загрузка изображений неудачна.

Полное путешествие события onerror

Я расскажу вам о нескольких интересных кейсах и способах использования onerror, чтобы вы могли извлечь из этого максимальную пользу.

Избежание бесконечных циклов

Бесконечные циклы – это нехорошо. Если даже запасное изображение не подгрузится, скрипт будет выполняться бесконечно. Вот, как это можно предусмотреть:

<img src="original.jpg" onerror="if(this.src !== 'fallback.jpg') this.src='fallback.jpg';" alt="">

Подробнее об этом расскажет наш спикер на видео

Совместимость с различными браузерами

Иногда onerror может работать некорректно в некоторых версиях Firefox. Давайте сделаем так, чтобы все браузеры работали одинаково хорошо.

• Воспользуйтесь методом error() из jQuery для универсальности:

$('img').error(function() {
  if (this.src !== 'fallback.jpg') {
    this.src = 'fallback.jpg';
  }
});

• Проверьте наличие изображения, оценив его ширину после ошибки загрузки:

window.onload = function() {
  var img = document.getElementById('myImage');
  if (!img.naturalWidth) {
    img.src = 'fallback.jpg';
  }
}

Поддержка со стороны сервера

Обработка на стороне клиента это хорошо, но не помешает привлечь сервер:

• В PHP используйте функцию file_exists(), чтобы проверить наличие изображения перед его выводом:

<?php
$src = file_exists('original.jpg') ? 'original.jpg' : 'fallback.jpg';
?>
<img src="<?php echo $src; ?>" alt="">

Общий обработчик ошибок для всех изображений

Если на вашем сайте много изображений, воспользуйтесь глобальным обработчиком ошибок:

function imageError(image) {
  image.onerror = null;
  image.src = 'fallback.jpg';
}

// Пример использования
<img src="original.jpg" onerror="imageError(this)" alt="">

Визуализация

Допустим, визуальная аналогия поможет нам лучше понять работу onerror:

Представьте ваш веб-сайт как цирковой номер:

🎪 Звезда шоу: Основное изображение (src)
🔽
🤸‍♀️ Подстраховщик: Запасное изображение (alt)

Когда главный номер не удался (основное изображение недоступно):

<img src="main_act.jpg" onerror="this.src='safety_net.jpg'; this.onerror=null;" />

Подстраховщик вступает в игру (onerror), и шоу продолжается (загружается запасное изображение):

До: 🤹‍♂️ -> ❌
После:  🤹‍♂️ -> 🤸‍♀️ (Запасное изображение выходит на сцену!)

И таким образом, шоу идет без сбоев и простоев. 🎭

Дополнительный уровень: усовершенствованное управление ошибками

Зачем ограничиваться "просто хорошим", когда можно сделать обработку ошибок при загрузке изображений еще более надежной?

Прямое присваивание src через JavaScript

Для большего контроля создавайте изображения динамически с помощью JavaScript:

var img = new Image();
img.onload = function() {
  // "Я еще тут!" – скажет, наверное, изображение.
};
img.onerror = function() {
  this.src = 'fallback.jpg';  // "Ой, извините..." – скажет, наверное, изображение.
};
img.src = "original.jpg";

Проверка успешности загрузки с помощью onload

Событие onload подтвердит успешную загрузку изображения:

<img src="original.jpg" onload="console.log('Ура! Загружено!')" onerror="this.src='fallback.jpg';" alt="">

CSS для поддержания визуальной гармонии

Фоновое изображение в CSS может быть привлекательной запасной опцией, поддерживающей общий дизайн:

.img-holder {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url('fallback.jpg');
  background-size: cover;
}

.img-holder img {
  width: 100%;
  height: auto;
}

<div class="img-holder">
  <img src="original.jpg" onerror="this.style.display='none'" alt="">
</div>

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

1. <img>: Элемент встраивания изображения – MDN — подробная информация о работе с тегом <img> в HTML.
2. Замена неработающих изображений с помощью jQuery/JavaScript – Stack Overflow — обсуждение различных способов замены недоступных изображений.
3. Событие onerror – W3Schools — подробное руководство по обработке ошибок загрузки изображений с использованием onerror в JavaScript.
4. Усовершенствованная обработка ошибок загрузки изображений – CSS-Tricks — советы по улучшению обработки ошибок при загрузке изображений с помощью CSS и JavaScript.
5. Документация по document.execCommand("CreateLink") в JavaScript – SitePoint Forums — анализ функции onerror и других аспектов JavaScript.
6. HTML Стандарт – WHATWG — официальные требования к элементу <img> из стандарта HTML.
7. "onerror": таблицы совместимости для HTML5, CSS3 и прочего – Can I use... — проверка совместимости атрибута onerror в разных браузерах.