x
 
Юрий Мазурский
12 декабря 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как избежать эффекта Упячки при загрузке картинок


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

Отсутствие непредсказуемых и бесконтрольных перемещений — признак хорошего, продуманного дизайна. Картинки, которые не дёргаются при загрузке — частный случай.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?
Совет Коли Митина

Но на боль­шин­стве стра­ниц нам не нужна упячка, а содер­жи­мое не должно дёр­гаться непред­ска­зу­емо. Полу­ча­ется, что нужно все­гда резер­ви­ро­вать место под ещё не загру­зив­ши­еся изоб­ра­же­ния. Это можно сде­лать, если нам зара­нее известны раз­меры кар­тинки. В таком слу­чае мы можем про­вер­нуть трюк, исполь­зу­ю­щий осо­бен­но­сти рас­чёта неко­то­рых вели­чин браузерами.

Отсутствие непредсказуемых и бесконтрольных перемещений — признак хорошего, продуманного дизайна. Картинки, которые не дёргаются при загрузке — частный случай.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?
Совет Коли Митина

Дело в том, что если ука­зать эле­менту вер­ти­каль­ный отступ margin-top, margin-bottom, padding-top или padding-bottom в про­цен­тах, то он рас­счи­та­ется не от высоты эле­мента, как кажется инту­и­тивно, а от ширины. Если известны раз­меры кар­тинки, мы можем вычис­лить её высоту в про­цен­тах от ширины по формуле:

высота ÷ ширина × 100%

Допу­стим, раз­мер кар­тинки 1300×1000 пик­се­лей, тогда:

1000 ÷ 1300 × 100% = 76,92%

Высота кар­тинки состав­ляет 76,92% от ширины. Именно такой вер­ти­каль­ный отступ мы можем дать эле­менту, чтобы он занял столько же места, сколько заняла бы картинка.

Если мы про­сто дадим отступ кар­тинке, место, кото­рое она зай­мёт после загрузки, удво­ится. Поэтому можно обер­нуть кар­тинку в обёртку и дать отступ обёртке, а кар­тинку пози­ци­о­ни­ро­вать абсо­лютно, чтобы она не зани­мала места:

.wrapper {
  position: relative;
  background-color: rgba(0, 0, 0, .07);
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="wrapper" style="padding-bottom: 76.92%;">
  <img src="image.png" />
</div>
Кар­тинки ещё нет, но место под неё заре­зер­ви­ро­вано

Можно пойти дальше — вообще изба­виться от тега img и ста­вить кар­тинку фоном самой обёртке. Мы так и делаем на сайте бюро, это упро­щает разметку.

Конечно, раз­меры кар­ти­нок и зна­че­ния вер­ти­каль­ных отсту­пов к обёрт­кам лучше опре­де­лять и рас­счи­ты­вать авто­ма­ти­че­ски на сер­вере, ещё до отправки ХТМЛ‑кода бра­у­зеру. Иначе при­дётся рас­став­лять их вручную.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Евгений Удод
12 декабря 2019

От такого решения проблем больше, чем пользы. Изображения, добавленные фоном, видны только глазами. Из-за отсутствия альта нельзя понять, что там, пока картинка не загрузится. Такое изображение будет «съедено» режимом чтения, как на скриншоте. Такие изображения не индексируются поисковиками. Поправьте, если я неправ и в вашем случае задача решена.

Поиск по картинкам в гугле говорит об обратном: в выдаче есть изображения советов, но только из старой версии, где картинки — нормальные img. Фоновое изображение будет одним и тем же для всех типов устройств: для простенького телефона и 4К-монитора. Да, решается подпрыгами, но зачем изобретать велосипед, когда есть srcset.

Олег Албаут
13 декабря 2019

А разве это не работает, только когда ширина элемента, которому задаётся padding, равна auto? У блока, вложенного в красный контейнер, она auto и всё окей, а у синего задана вручную и отсчитывается от родителя:
https://codepen.io/Giglz/pen/rNaLbxb

Игорь Шнайдер
14 декабря 2019

> От такого решения больше проблем, чем пользы. Изображения, добавленные фоном, видны только глазами. Из‑за отсутствия альта нельзя понять, что там, пока картинка не загрузится.

Евгений, что мешает добавить изображение в контейнер через img?

Евгений Удод
17 декабря 2019

Игорь, если вопрос ко мне, то не знаю :-) Я тоже за img. Мой комментарий адресован финальному решению Юрия:
«Можно пойти дальше — вообще избавиться от тега img и ставить картинку фоном самой обёртке. Мы так и делаем на сайте бюро, это упрощает разметку».

img — это намного больше, чем «картинка». Устройства умеют с ним работать специальным образом. Рекомендую прочитать интервью, в котором слепые люди рассказывают, как они страдают от неправильной разметки сайтов: https://medium.com/web-standards/a11y-users-interview-3284085cee3f


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Автотесты «на пальцах» 1 Почему лучше разделить фронтенд и бэкенд? 6 Что показывает уровень развития инженерной культуры? Разработчик, который не думает, а просто делает — не нужен? 5




Недавно всплыло

Как найти себе замену 1 В бюро есть таймтрекинг для сотрудников? 5 Почему эспрессо стоит 100 рублей, а американо 150? 3 Как совместить информационный стиль и текст для поисковиков? 7