Как оформить прелоадер изображений?

Question

[Илья Пирожок]

Подскажите как сделать чтобы картинки не "скакали" при загрузке, чем и как их закрыть? Делать предзагрузку не вариант т.к. картинок в каталоге довольно много и размеры блоков меняются при media запросах.

Answer 1

[iBird Rose]

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

Comments

[Илья Пирожок]

А если высота меняется? Может сначала узнавать высоту img и через js присвоить её блоку?

[iBird Rose]

Илья Пирожок: ну если только ты ее на стороне бекенда сразу узнавать будешь и сразу при загрузке будешь прописывать ей какой нить data-height="337". а если через js - толку не будет. document.ready не отработает. а значит и высоту img ты не узнаешь пока картинка не загрузится. а значит ты уже не успел проделать скрипт - а значит все будет прыгать при загрузке.

[Илья Пирожок]

iBird Rose: Да, не подумал об этом

Answer 2

[Anton fon Faust]

У всех изображений задавайте высоту-ширину или в css или в html - не будет ничего скакать при загрузке.