Question

这里的简单演示：https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview（我使用官方的angular.io/docs演示应用程序）

问题是：第一个屏幕加载器（我用过loader.svg）动画在Angular App的初始加载过程中冻结了一秒

过程如下：打开页面，svg loader animation starts - ＆gt;装载机动画冻结 - ＆gt;装载机动画重新开始 - ＆gt;角度app完成加载，装载机隐藏

在此演示中，冻结更明显：http://iarouse.com/dist-angular2-material/v1/

{"_id":123 , "gender": m}
{"_id":456 , "gender": f}

我的真实应用程序更大，初始加载器动画在引导过程中冻结了几秒钟，这令人沮丧

我能做些什么来让它顺利进行？

Answer 1

我有你的问题，因为我正在渲染一个gif微调器图像。我尝试了@bviale发布的解决方案，但它确实有效。

只需使用https://www.w3schools.com/howto/howto_css_loader.asp中建立的代码并在app-root标记之间插入。

Answer 2

使用演示：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>

角度预引导（第一屏幕）加载器的动画在初始加载期间冻结

2 个答案: