Анимация загрузчика угловой предварительной загрузки (первый экран) зависает при начальной загрузке

Простая демонстрация здесь: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (я использовал официальное демонстрационное приложение angular.io/docs)

Проблема в том, что анимация первого загрузчика экрана (я использовал loader.svg) останавливается на секунду при начальной загрузке приложения Angular.

Процесс выглядит следующим образом: откройте страницу, svg запускается анимация загрузчика -> анимация загрузчика зависает -> перезапускается анимация загрузчика -> угловая загрузка приложения заканчивается, загрузчик скрыт

В этой демонстрации заморозка более очевидна: http://iarouse.com/dist-angular2-material/v1/

<my-app>
  <!-- the loader -->
  <div id="loader-container"></div>
</my-app>

Мое настоящее приложение больше, и начальная анимация загрузчика зависает на несколько секунд во время процесса начальной загрузки, что расстраивает

Любая вещь, которую я могу сделать, чтобы сделать это гладко?

Источник

1 ответ

У меня была ваша проблема, потому что я рендерил изображение GIF Spinner. Я попробовал решение, опубликованное @bviale, и оно сработало.

Просто использовал код, найденный в https://www.w3schools.com/howto/howto_css_loader.asp и вставленный между app-root тег.

Источник

Использование демонстрации: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview

Если я поставлю ниже скрипт в конце после концов, то я увижу, что загрузчик работает плавно, без перерывов, потому что на консоли отображается много ошибок.

<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

образец ошибки, о котором я говорю:

GET https://unpkg.com/core-js@3.6.5/client/shim.min.js net::ERR_ABORTED 404

И после перемещения скрипта за телом ваш index.html выглядит следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular Tour of Heroes</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
    <!-- Polyfills -->


    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>
      <div id="loader-container"></div>
    </my-app>
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
  </body>

</html>
Источник
Другие вопросы по тегам