Школа
Веб-разработка

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

12 дек 2019
👁 14603   🗩5
Веб-разработка

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

12 дек 2019
👁 14603   🗩5
Юрий Мазурский
Разработчик и дизайнер
Полезно
 15
15
Непонятно
 3
3
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

Дело в том, что если указать элементу вертикальный отступ 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 15
15
Непонятно
 3
3
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Евгений Удод

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

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

Олег Албаут

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

Игорь Шнайдер

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

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

Евгений Удод

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

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

Картинку, поставленную фоном, нельзя сохранить к себе на устройство или открыть в новой вкладке без инструментов разработчика.

Юрий, является ли проблемой, когда из‑за медленной загрузки картинок сайт «прыгает»? Полезно ли решение этой ситуации для человека, который смотрит сайт?

Если «закрепить» высоту страницы, то на месте недогруженной картинки будет показан пустой блок. В наше время людей, которые заходят на сайты с телефона, больше, чем заходящих с десктопа. У телефона в вертикальном положении узкий экран.

Велика вероятность, что пользователь, увидев пустой блок, не догадается, что там что‑то должно быть, проскролит ниже, чтобы продолжить читать текст — пустой блок исчезнет с экрана. И посетитель сайта никогда и не увидит картинки.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы