Angular pre-bootstrap (first screen) loader's

2020-07-14 06:08发布

站内问答 / Angular
1020 2 3

Simple demo here: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (I used the official angular.io/docs demo app)

The problem is: the first screen loader (I used loader.svg) animation freezes for a second during the initial loading of Angular App

The process goes like this: open the page, svg loader animation starts -> loader animation freezes -> loader animation re-starts -> angular app finish loading, loader hided

In this demo, the freeze is more obvious: http://iarouse.com/dist-angular2-material/v1/ 

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

My real app is larger, and the initial loader animation freezes for a few seconds during bootstrap process, which is frustrating

Any thing I can do to make it smooth?

2条回答
干净又极端
2楼-- · 2020-07-14 06:10

Using Demo: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview

If I put below script in the end after ends then i see loader playing smoothly without interruption, because is see lots of errors on console.

<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>

error sample I am talking about:

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

And after moving script after body, your index.html looks like below:

<!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>
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2020-07-14 06:34

I had your problem because I was rendering a gif spinner image. I tried the solution posted by @bviale and it worked.

Simply used the code founded in https://www.w3schools.com/howto/howto_css_loader.asp and putted between the app-root tag.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)