@jeanrus

Как получить момент когда весь контент страницы по-настоящему загружен в React?

Я делаю сайт на React и хочу сделать загрузочный экран, который будет показываться пока страница полностью не загрузится. В Networks в инструментах разработчика я вижу, что события load и DOMContentLoaded происходят в одно и то же время и до того, как картинки и шрифты загрузятся. Я пробовал React.Suspense, но он триггерится только на load, а, как я уже сказал, load активируется слишком рано.
PS: большинство картинок задани с помощью background: url().

Решение: я поставил onload на всех картинках и это "отодвинуло" window onload до момента, когда все реально загрузилось.
  • Вопрос задан
  • 566 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Почему такое происходит?
Событие load отрабатывает когда всё что уже было на странице загружено.
Проблема в том, что react-компоненты появляются динамически с помощью js, что выкидывает их из стандартной системы.

Что делать?
Вопрос не простой, ты никак не можешь отследить загрузку bg картинок напрямую.
Способ который будет работать гарантировано, но костыльный и напряжный: взять все нужные картинки и загрузить их в фоне руками через new Image, когда они все будут загружены - можно отобразить.
Иные варианты? Х.з.)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы