Angular pre-bootstrap(第一个屏幕)加载器的动画在初始加载期间冻结

Question

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

问题是:第一个屏幕加载器(我使用loader.svg)动画在Angular App的初始加载过程中冻结了一秒钟

过程如下:打开页面,svg加载器动画启动 - >加载器动画冻结 - >加载器动画重新启动 - >角度应用程序完成加载,加载器隐藏

在这个演示中,冻结更明显:http://iarouse.com/dist-angular2-material/v1/

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

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

我能做些什么让它变得光滑？

Answer 1

我遇到了你的问题，因为我正在渲染 gif 旋转图像。我尝试了@bviale 发布的解决方案，它有效。

只需使用https://www.w3schools.com/howto/howto_css_loader.asp中创建的代码并将其放在app-root标签之间即可。