Почему прыгают изображения на странице и как это пофиксить?

Question

[Олег]

Добрый день!
Случилась проблема. Как можно починить проблему, когда изображения при перезагрузке страницы меняются в размере на секунду. Из-за этого, страница дергается.
Я знаю, что это можно исправить задав height и width тегу img. Но в данном случае, нет такой возможности.
Ссылка на сайт: сайт
Вот этот блок с изображениями при перезагрузке прыгает: https:// prnt. sc/rxalhm

Возможно ли как-то это починить, без указания height width изображениям.
Спасибо за помощь!

Comments

[xdevelx]

При 600px сетка с типами товаров "косячная"

Answer 1

[tyzberd]

У вас сначала лейзилоад вставляет картинку 1*1 в base64, она растягивается до ширины контента 369 и так как она квадратная, то высота тоже 369.
https://habrastorage.org/webt/jr/gf/y_/jrgfy_wbxzq...
Потом подгружается нормальная картинка, у нее уже другие пропорции и меняется высота.
Прописывайте какой то max-height картинке

Answer 2

[VladBokov]

Отложите отображение контента до полной загрузки файла стилей. Видимо в нем прописаны размеры картинок, которые вы можете наблюдать после полной загрузки документа. Или же выведите кусок стилей, отвечающих за высоту картинок которые "прыгают" непосредственно в хедер страницы.