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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

 

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

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



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