Одно время Упячка была очень популярна. Сайт представлял собой одну огромную ленту с миллионом маленьких и больших картинок. Картинки загружались постепенно, поэтому содержимое страницы всё время скакало по мере загрузки изображений. Это добавляло шизофрении и без того сумасшедшему сайту.
Отсутствие непредсказуемых и бесконтрольных перемещений — признак хорошего, продуманного дизайна. Картинки, которые не дёргаются при загрузке — частный случай.
За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?
Совет Коли Митина
Но на большинстве страниц нам не нужна упячка, а содержимое не должно дёргаться непредсказуемо. Получается, что нужно всегда резервировать место под ещё не загрузившиеся изображения. Это можно сделать, если нам заранее известны размеры картинки. В таком случае мы можем провернуть трюк, использующий особенности расчёта некоторых величин браузерами.
Отсутствие непредсказуемых и бесконтрольных перемещений — признак хорошего, продуманного дизайна. Картинки, которые не дёргаются при загрузке — частный случай.
За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично и не разваливалась?
Совет Коли Митина
Дело в том, что если указать элементу вертикальный отступ 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.