Угловая загрузка белого экрана за несколько секунд до показа веб-сайта - PullRequest
Новая
       35

Угловая загрузка белого экрана за несколько секунд до показа веб-сайта

0 голосов
/ 07 марта 2019

Проблема:

Угловая загрузка белого экрана за несколько секунд до отображения приложения.Это происходит только 1 из 6 попыток загрузки сайта, в основном, когда я закрываю браузер и снова открываю его, а затем захожу на свой сайт.

Ожидаемый результат:

СайтСамо приложение / загружается в течение 1.6 секунд в большинстве случаев.Я в основном хочу, чтобы белый экран перестал отображаться на 6-8 секунд случайным образом.Это похоже на то, как веб-сайты засыпают, но я получаю приличный трафик на сайт.

Tech : Angular версии 7, AngularCLI, Cloudflare и Hosting with Firebase.

Информация :

Я получаю эти 4 странных желтых предупреждающих сообщения в консоли.Я не уверен, если это вызывает проблемы.

На снимке экрана ниже показано то, что я вижу в течение 5 секунд плюс:

1 Ответ

1 голос
/ 08 марта 2019

Вы можете попробовать предварительно загрузить некоторый легкий критический css, который показывает своего рода анимацию / заставку, когда ваш браузер загружает другие более тяжелые ресурсы с сервера. Это сократит время, которое занимает «белый экран», и создаст у пользователя впечатление, что веб-страница загружается и что-то происходит.

Кроме того, вы можете прочитать больше о preload здесь. Предполагая, что вы используете Angular в index.html внутри тега <head>: 

<!-- preload css-->
    <link rel="preload" as="style" onload="this.rel='stylesheet'" href="your-path/assets/preload.css">

А на вашем <body> вы визуализируете какой-то вращатель, который отображается, пока браузер загружает другие файлы скриптов. 

<div class="app-loading">
  <svg class="spinner" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>
...