Как сделать чтобы отображался лоадер, пока страница не загрузиться?

Question

[­]

В моём single page application очень много изображений, идущих со стороннего api.
Хочу чтобы при открытии страницы отображался лоадер (Надпись Loading... , например). И как только все картинки прогружены, лоадер пропадает и отображается страница.
Такое вообще возможно?

Comments

[Сергей delphinpro]

Как сделать чтобы отображался лоадер, пока страница не загрузиться?

Дождаться, пока все ресурсы не загрузяться, потом скрыть лоадер и показать страницу.
В каком месте проблема?

[Сергей delphinpro]

Основное время загрузки — это картинки. Бегаем по странице (или заранее генерим список), ищем кртинки, на каждую вешает onload. Так мы узнаем что всё загрузилось. Дальше дело техники.

[­]

Сергей delphinpro,

Дождаться, пока все ресурсы не загрузяться, потом скрыть лоадер и показать страницу.
В каком месте проблема?

Да, звучит как надо. Но я не знаю как это сделать. Вот в следующем сообщении вы написали повесить onload. За это спасибо, пойду посмотрю что из этого выйдет.

Answer 1

[Виталий Киренков]

https://javascript.ru/forum/css-html/29896-indikat...

Как-то так видимо. Ну и адаптировать под себя с большим кол-вом.

Comments

[­]

Немного не то. Мне не надо вместо картинки лоадер отображать. Надо всю страницу скрыть, пока самая последняя картиночка не загрузиться.

[Виталий Киренков]

­, механизм тот же. Изначально делаете див на всю страницу с классом лоадер. В джс сопоставляете кол-во загруженных картинок с ожидаемым, как только условие срабатывает, див прячете/удаляете

Answer 2

[Николай Демидовец]

используйте thunk, который поможет реализовать ассинхронные экшены