Как сделать такую загрузку страницы?

Question

[Максим Маркитантов]

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

Comments

[Никита]

Отвратительная хрень, текст явно подгрузился, а ещё не виден - так выбешивает, особенно если какой-то кусок внизу грузится несколько секунд. Вижу такой треш - жму на "стоп" в браузере, чтоб хоть что-то увидеть, а что не загрузилось к чёрту. Ощущения после такого посещения на сайт конечно не лучшие.

[Максим Маркитантов]

В данном случае сначала вставляется разметка заглушка, а потом реактом перерисовывается все.

Answer 1

[Pongo]

Есть библиотеки для такого эффекта. Например:

• https://github.com/zafree/placeholder
• https://github.com/Chalarangelo/mocka
• https://victorvoid.github.io/placeload.js/
  

Answer 2

[Александр Петров]

Мне кажется нужно сначала просто сверстать вариант до загрузки. А потом с помощью ajax грузить конечный вариант и заменять им предыдущий. получается пока ajax грузится, висит стратовый вариант. а потом накладывается нужный)

Comments

[Алексей Струков]

Теоретически можно засунуть каждое слово в span, поставить ему одинаковый бэкграунд и колор, а потом когда все прочие требуемые ресурсы будут скачаны либо удалить эти спаны, либо если документ не очень большой и лень заморачиваться, отменить им стили бэкграунда и колора.

Даже незнаю, стоит ли оно того)

[Vilintritenmert]

Каждый елемент и так имеет свой DOM ;) Осталось придумать как его наполнить контетном

Answer 3

[profesor08]

Проще некуда:

body.loading p {
   color: #2C62B3;
}

if (allLoaded())
{
  document.body.classList.remove("loading");
}

Но подозреваю автор ищет готовое решение.

Comments

[Максим Маркитантов]

В данном случае сначала вставляется разметка заглушка, а потом реактом перерисовывается все.

Answer 4

[Сергей Соколов]

Похожий эффект Facebook разбирают (на англ.)

Answer 5

[Александр Решетняк]

Полагаю пользователи сайта воспримут лучше вариант когда грузится только контент что показан на экране, остальное подгружается при скроле

Answer 6

[lukoie]

Зайти в комьюнити Слакчата, и там спросить

Comments

[lukoie]

Интересно, у гугл диска тоже кстати такой эффектик есть:

[lukoie]

ой, там вот такой жесткач : (