Angular 2加载动画卡顿

Question

我开发了一个Angular 2应用程序，它的大小相当大，需要一段时间才能加载（vendor.js大约有5 MB）。为了让用户的等待时间更加愉快，我替换了标准的

<span class="loading">Loading...</span>

用CSS动画（加载条）或GIF动画的方式：

<span class="loading"><img src="loading.gif" /><br/>Wait ...</span>

或者

<span class="loading"><span class="circle-loader-with-css-animations"></span>Wait ...</span>

但是这并不起作用，因为动画（CSS或GIF）在页面加载期间会冻结，当它继续时，Angular应用程序已准备就绪并显示。结果就是一个被冻结的加载动画，然后就是应用程序 = 情况并没有比之前更好...

顺便说一下：在此加载时间内，JavaScript（例如setInterval）也不会执行。我尝试使用async和defer包含vendor.js，但没有成功。

有任何想法吗？

编辑：似乎是Google Chrome的问题-在Firefox中，动画运行流畅。

- D. Bauer

---

在Firefox中也有同样的问题。 - iAmV

虽然我来晚了，但我刚看到你的问题。Angular支持模块惰性加载。5 MB对于一个应用程序来说太大了，不要一次性加载所有内容。先加载主页，然后随着需要懒加载其他模块。 - Jeremy Thille

可以在这里发布你的代码吗？ - Dipak

您是否正在使用Service Worker将加载移动到单独的进程中？ - Xesenix

@Xesenix 你能否更详细地解释一下如何将加载脚本文件和所有其他预引导文件移动到服务工作者中？ - Terrance Jackson

@TerranceJackson 不确定从哪里开始，你是否知道这个 https://angular.io/guide/service-worker-intro？通常情况下，您希望尽早运行服务工作者，以便它可以控制页面使用的资产的加载。但是对于某些东西，例如预加载程序，您可能希望在基本页面HTML中内联（base64）预加载程序的内容，以便用户下载第一个页面内容后立即可用。此外，您希望大量依赖于延迟加载模块，仅加载必要的代码，以至于您在基本内容中是加载器等，而其他任何内容都稍后加载。 - Xesenix

Answer 1

我在个人网站上使用CSS加载旋转器；只是想分享我的代码，因为它对我有用，并且似乎在大型代码库中没有任何问题。显然，如果这对您有用，您需要根据自己的需求进行调整。

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid grey;
    width: 70px;
    height: 70px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

<div class="loader"></div>

- Jacob Goodwin