Битые картинки vs CSS

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как минимум иметь механизм управления их внешним видом, вместо стандартного поведения браузера.

Здесь мы не будем рассматривать возможности JS, где вы можете вылавливать события onerror объекта window, что позволит реализовать любую логику дальнейшего поведения (например, протоколирование фронт-енд ошибок на сервере). Мы остановимся на CSS трюках, чтобы визуально оформить наши битые картинки.

Объектом исследования станет следующий HTML пример:

Результат рендеринга такого <IMG> (возможно, немного иной для разных браузеров) вы видите в начале статьи.

Прячем калеку

Первое желание — это спрятать покалеченную картинку, по крайней мере, пустой квадрат выглядит лучше. Сделать это просто:

Если изображение не прогрузилось, то вместо неё будет пустое пространство.

Заменяем битую картинку своим изображением

Аналогично тому, что сайты показывают специально оформленную страницу вместо стандартной 404й ошибки, было бы здорово показывать специально подготовленную картинку вместо битого изображения.

Это может логотип компании, или изображение с надписью — «Картинка подготавливается», тут ваша фантазия должна вам подсказать как обыграть данную ситуацию.

«Резервное» изображение цепляется как background-image самого тега IMG или его псевдо-контейнеров. Пример стилей:

По сути ясно, что сам контейнер IMG и его псевдо-элементы, идут поверх слоя «битой» картинки, и, таким образом, маскируют её от пользователя.

Написать комментарий

Мало букафф? Читайте есчо !

Эффект размытия blur средствами CSS

Декабрь 23, 2015 г.

В интернете много решений, я попробовал, наверное, все :) Основная проблема - не удаётся достичь кросс-браузерности. Как всегда, отличился IE. Для ...

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

 

Комментарии к «Битые картинки vs CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: