Избавляемся от скачков страницы при загрузке изображений

171900_10151236273983571_1504363868_o

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

Чего мы хотим добиться

В итоге нам нужен элемент, который сохраняет свои пропорции и ведет себя так же, как и тэг <img>, а именно:

  • соотношение ширины и высоты;
  • ограничение по высоте элемента (если изображение размерами 300 на 200 пикселей, то желательно, чтобы оно не растягивалось в высоту больше, чем на 200 пикселей, дабы избежать его размытия);
  • элемент должен быть инлайн-блочным, как и тэг <img>

Поиск решения

Первое, что может придти в голову, это возложить эту задачу на javascript, но нужно учесть тот факт, что js, как правило, тоже запускается далеко не самым первым на странице. Так что необходимо чтобы проблема была решена уже на этапе выдачи html в браузер.

Кто же может знать параметры изображения еще до рендеринга его в браузере? Если наш сайт не на чистом HTML, то с этим нам поможет backend, будь то Ruby, PHP или любой другой серверный язык.

Например:

Исходя из имеющихся сведений попытаемся решить поставленную задачу на css.

Первое, что мы можем сделать — это обернуть <img> в <span>, ограничить его высоту и указать ширину.

Добавим нашему спану несколько стилей. Сделаем его инлайн-блочным и добавим анимацию загрузки в качестве фона. Так же ограничим его максимальную ширину.

Теперь блок имеет ограничения на свои размеры, однако он всё еще имеет нулевую высоту до загрузки изображения. Решить эту проблему поможет внутренний спан. Как мы знаем, padding-bottom, заданный в процентах, расчитывается исходя из ширины элемента. Используем эту особенность задав паддинг, равный пропорциям изображения.

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

Остаётся только сделать тэг <img> адаптивным, например с помощью класса img-responsive, входящего в состав bootstrap, или с помощью варианта ниже:

Пример работы представлен на этой странице. Изображения намерено были выбраны очень большими, дабы процесс их загрузки был более заметным (осторожно, трафик!).

Email this to someoneShare on VKShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedIn