Как исправить прыгающий контент?

Question

[zeaovede]

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

Начало загрузки

Конец загрузки

Что с этим можно попробовать сделать?

Ссылка на сайт

https://elo-boost.ru/

Comments

[Виктор]

можно фиксированные размеры рамок сделать и в них изображения вставлять, а пока они не загрузилить отображать плавное моргание бэкграйнда (загрузка типо)

[zeaovede]

Виктор, "плавное моргание бэкграйнда" в какую сторону нужно смотреть, чтобы реализовать это?

[Виктор]

zeaovede, гуглить card loading, что-то вроде этого

[zeaovede]

Виктор, интересное решение, уделил вопросу время, как итог для меня сложным оказалось

Answer 1

[Everything_is_bad]

этому знанию 100500 лет и оно без проблем гуглится, надо просто в img сразу прописывать размеры картинок

Comments

[zeaovede]

Я попробовал так сделать, при масштабировании страницы размер изображений меняется, а рамки остаются фиксированными. Существует ли другой метод? Плюс предположим, что эти изображения выводятся у меня в мобильной версии

[Everything_is_bad]

zeaovede, значит ты делаешь рамки не на img, а на другой тег, либо переноси их на img, либо сразу фиксируй размер тега с рамками. И ты точно проверял именно с прописанными размерами?

[zeaovede]

Everything_is_bad, По совету перенес border в img, задал width и height. Теперь и то и другое работает как одно целое. В figure border пофиксил через unset. Не стал figure сносить полностью, много привязок через него идет. Для меня история с переписыванием кода с нуля слишком запарная.