Как сделать прелоадер для ожидания пока загрузятся скрипты в head?

Question

[zeni1agent]

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

Answer 1

[Otrivin]

Инлайново CSS анимации прелоадера; последним скриптом выполнять функцию скрытия прелоадера

Answer 2

[Robur]

Загружайте скрипты не в head а в конце body или асинхронно с defer. В самом body нарисуйте индикатор загрузки, как скрипты загрузятся - убирайте индикатор.

Comments

[zeni1agent]

Все эти скрипты нельзя загрузить в конец хедера но defer вроде помог но я не знаю почему анимация работает только в самый последний момент загрузки.
Анимация происходит по средствам свойства @keyframes

[Robur]

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

[zeni1agent]

Robur, Ну я попробовал перезагрузить страницу и удалить весь кеш Shift + Ctrl + R это помогло но она все равно заедает пока грузится страница. При повторном воспроизведение анимация останавливается и приходится опять чистить кеш.