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

Question

[Alex]

Во многих популярных приложениях для смартфонов, есть способ визуально ускорить загрузку данных. Это имитация элементов интерфейса с бегающим (анимационным) градиентом.
Есть ли удачные примеры реализации (или готовые плагины) этой фишки в Веб на JS или CSS, чтобы при загрузке страницы они появились первыми пока не подгрузилось всё что нужно?

Comments

[B1dloKoder]

Отвечая прямо на Ваш вопрос - нет. Пустота во время загрузки в любом случаи будет в какой-то степени. Чтобы что-то появилось, нужно ведь получить документ, отрисовать его и т. д.
То есть в любом случае будет момент, когда на экране (по крайней мере в первый раз, ничего не будет).
Можно отправлять страницу шаблон, которую сервер выплюнет быстро, а потом уже делать прочие ajax-запросы и заполнять страницу. Ну и в таком случае я думаю архитектура SPA - Ваш выбор.

[Alex]

B1dloKoder, у меня как раз SPA поэтому решил реализовать подобное

[B1dloKoder]

Alex,
Отрендерите пустые компонент (или как оно там называется) а потом просто догружайте данные. Идея в том чтобы выдать чистый интерфейс там, где он будет догружаться, а данные заполнить в последствии. Я не знаю что вы используете для своего spa. В реакте, например, это делается с помощью хуков эффекта.

Answer 1

[inFureal]

То что ты ищешь, называется skeleton. Есть куча реализаций под ванилу и под фреймворки