Почему рендеринг страницы начинается с середины?

Question

[kaalka]

В первую очередь хотелось бы сказать, что я начинающий верстальщик. Поэтому не судите строго)
Так вот, суть вопроса. Есть страница, над которой я сейчас работаю. Находится по адресу https://zencoding.ru/bm/
При первичном обращении к странице, рендеринг начинается с середины. Т.е. вначале показываются блоки из середины, а только потом отображаются верхние блоки. Почему так происходит? И как можно сделать так, чтобы пользователю показывалась полностью загруженная страница, вместо того, чтобы видеть как рендерится страница.
Лучше всего проблема видна в режиме инкогнито.

Answer 1

[Андрей]

Рендеринг всегда начинается сверху. В Вашем случае просто сначала картинки еще не загружены, и контейнеры, обрамляющие их, схлопнуты, потом, когда картинки подгружаются, страница перерисовывается браузером уже с открытыми и заполненными контейнерами.
Вам поможет свойство min-height для контейнеров картинок, может быть какой нибудь прелоадер добавить.
Лучше всего подобные проблемы рассматривать не в инкогнито, а во вкладке network -> slow 3g панели разработчика со сброшенным кэшем https://cl.ly/0g3O1j2t0m45

Comments

[Stalker_RED]

Дополню, что в хроме можно выбрать скорость загрузки, на низкой скорости проще замечать косяки.

[Андрей]

Stalker_RED, так яж сказал это :)