Скрытие иконки «Изображение не найдено» в HTML: CSS, JS
Быстрый ответ
Для того чтобы устранить значок "Изображение не найдено", задайте обработчик события onerror
для элемента <img>
. Он изменит его стиль на none
в случае неудачной попытки загрузки:
<img src="missing-image.jpg" onerror="this.style.display='none';" />
В случае неверного значения атрибута src
сработает onerror
. Он устанавливает для элемента <img>
значение display: none
, что исключает его из DOM-структуры веб-страницы.
Мягкая устойчивостью к ошибкам: теоретически и на практике
Попытка обратиться по неправильному пути к изображению чаще всего приводит к стандартной реакции браузера, которая включает отображение значка поврежденного изображения. Это может «ломать» дизайн вашего сайта и ухудшать впечатление от взаимодействия с ним. Изящное обработка таких случаев помогает улучшить пользовательский опыт.
Поддержка ваших макетов
Помимо HTML-атрибута onerror
, существуют и другие инструменты. Одним из них является CSS, который позволяет дизайнерам сохранять пространственную целостность макетов, применяя visibility: hidden
, а не display: none
для незагрузившихся изображений.
img[src=""] {
visibility: hidden; // Вуаля! Я все еще занимаю место, но меня не видно!
}
Отличие visibility: hidden
от display: none
заключается в том, что первое сохраняет пространственные параметры элемента макета, делая его невидимым для глаз пользователя.
Замена на заполнители
Если вы предпочитаете не просто скрывать изображение, но и заменять его на заполнитель, то можно воспользоваться jQuery:
$("img").on("error", function() {
$(this).attr("src", "default-placeholder.png"); // Возникли проблемы со снимком? Используем заполнитель!
});
В данном сценарии на jQuery предусмотрена замена незагружившихся изображений на заранее подготовленные заменители — это информативный и стильный способ предлагать альтернативный контент.
Div-элементы и фоны: альтернативный подход
Одним из вариантов загрузка изображений вместо тега <img>
является использование div
с фоном заданном через background-image
. Это позволит избежать появление значков ошибок загрузки.
<div style="background-image: url('image.jpg'); height: 100px; width: 100px;"></div>
Использование фонового изображения открывает больше возможностей для контроля отображения изображений.
Глобальная обработка ошибок изображений
Установка обработчика onerror
для каждого изображения — процесс, требующий значительных усилий. Вот способ решить проблему глобальной обработки ошибок:
window.addEventListener("load", function() {
document.querySelectorAll('img').forEach(function(img) {
img.onerror = function() {
this.style.display = 'none'; // Проблемы с загрузкой? Сделаем изображение незаметным!
};
});
});
Этот код запускается после загрузки страницы и назначает обработчик ошибок всем изображениям на странице одновременно.
Визуализация
Наглядный пример реализации:
До:
Рамка изображения: 🖼️
Визуальная ошибка: ❌🖼️
Текст альтернативы: (Изображение не найдено)
После применения нашего решения:
img[src=""], img:not([src]) {
display: none; /* До свидания, ошибка! */
}
После:
Рамка изображения: 🖼️
Ошибка мягко обработана: ✨ (Совершенно невидимо)
Нет текста альтернативы.
И ошибка исчезает за считанные секунды! ✨🖼️✨
Глубокое погружение в обработку ошибок
В процессе работы с изображениями, которые не загружаются, учитывайте следующие моменты:
- Изменения в макете: Обратите внимание на возможные изменения в макете из-за применения
display: none;
. - Влияние на доступность: Обеспечьте предоставление альтернативных текстов через атрибут
alt
для пользователей со специальными потребностями. - Поведение браузера и настройки пользователей: Обеспечьте корректное функционирование вашего сайта даже при отключении JavaScript при использовании пользователями.
- Постоянное улучшение: Стройте основу, которая будет работать без JavaScript или CSS, и далее улучшайте её, где это возможно.
- Производительность: Использование асинхронной загрузки скриптов или отложенной стратегии выполнения может улучшить начальную скорость загрузки.