22 марта 2016  /  Фронтенд

За и против. Оформление незагруженных изображений.

Браузеры отображают незагруженное изображение

Восьмого марта 2016 года, Ире Адеринокун опубликовала пост «Styling Broken Images», в котором рассказала о способе оформления не загрузившихся изображений через псевдоэлементы before/after. Эта статья, вызвала оживление сообщества. Её перевели на русский язык одновременно на нескольких ресурсах с задержкой около недели.

Если вы не знакомы с этой заметкой, то вот тезисы из неё:

1. Если картинка не загрузилась, в некоторых браузерах для неё работают превдоэлементы before/after.
2. Псевдоэлементы имеют свойство content, в которое можно передать значение атрибута.

Статья интересная, метод работает в десктопных версиях Хрома, Огнелиса и Оперы (еще бы ведь опера это хромиум). Но применять этот подход мне кажется сомнительным решением. И вот почему:

1. Я не нашел в спецификации ничего о псевдоэлементах у медиа контента. Это баг или фича?
2. Поддержка только десктнопными браузерами и не всеми.
3. IE? Не работает.
4. Safari/Safari web view — не работает.
5. Это псевдозабота о пользователе, которая не решает его проблему.

Проблема незагруженных изображений мне не кажется такой серьезной. Об этом никто не задумывался раньше. Хотя решения были и до этого:

1. JavaScript — слушаем событие onerror и делаем что хотим. Вообще все что хотим.

   <img src="error.jpg" onerror="remove()">
   <!-- или -->
   <img src="error.jpg" onerror="src='fallback.jpg'">
   

2. Object

   <object data="error.jpg" type="image/jpg">
       <img src="fallback.jpg">
       <!-- или -->
       <p>Сорян, не загрузилась картинка :(</p>
   </object>
   

3. Забить? Никого раньше это не пугало. Пользователю ясно что картинка не загрузилась.

Проблема, которую стоит решить у незагруженных/загружающихся изображений — изменяющиеся размеры. Изображение либо распирает после загрузки, либо остается маленьким если не загрузилось. Из-за этого плохо работает навигация по хэшам, скачет контент и полосы прокрутки, из-за чего невозможно читать статью.

Слышу голос критика с задней парты: «У изображений есть атрибуты width и height, поставьте туда значения и его не будет распирать после загрузки». Если у вас адаптивный дизайн — будет.

Но займемся этим в следующий раз.

⌘ ⌘ ⌘

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.