Что касается заглушек, то их и реализуют в виде зацикленных анимаций только для того, чтобы не было явного окончания.
Что касается реального индикатора загрузки, то лично мне известно только один способ -
- всё грузить с помощью
XMLHttpRequest
и использовать его событие progress
.
И самое главное, что нужно помнить, что не всем людям нравится группа Ария. Я это к тому, что не все могут оценить сложность реализации реального лоадера и многим он даже может не понравиться. Тем более нельзя забывать, что существуют приложения, которые реально нуждаются в лоадере, а есть такие, в которых его категорически нельзя использовать. Для пользователя важнее увидеть как можно быстрее контент за которым он приходит, а не прогресс загрузки.
UPD: 0.0.1
По поводу заглушки... Чтобы заглушка показывалась только до полного окончания формирования страницы используют события.
Если нужно, чтобы пользователь, как можно быстрее увидел сформированную страницу, используют событие DOMContantLoaded
, которое посылается тогда, когда все скрипты загружены и dom
полностью сформирован на столько, что к нему уже можно обращаться. Единственное, что не успевает загрузится, это картинки ссылки, на которые указаны в html разметке. Это подходит в 90% случаях, при которых на их место ставится красивая заглушка сигнализирующая, что скоро здесь будут изображения.
В тех случаях, когда изображение является частью приложения, то есть как в случаи с фоном на главной странице, используют событие load
, которое посылается тогда, когда скрипты загружены, dom
сформирован и все картинки загружены.
Отдельно стоит сказать что скрипты js
библиотек добавляют в конце блока body
, а на событие подписывают document
.