Angular pre-bootstrap(第一屏)加载程序的动画在初始加载过程中冻结 [英] Angular pre-bootstrap (first screen) loader's animation freezes during initial loading
问题描述
此处的简单演示: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (我使用了官方的angular.io/docs演示应用程序)
问题是:在Angular App的初始加载过程中，第一个屏幕加载器(我使用loader.svg)动画冻结了一秒钟.
过程如下:打开页面，开始svg加载器动画->加载器动画冻结->加载器动画重新启动->角度应用完成加载，隐藏加载器
在此演示中，冻结更加明显: http://iarouse.com/dist -angular2-material/v1/
<my-app>
<!-- the loader -->
<div id="loader-container"></div>
</my-app>
我的真实应用较大，并且引导程序过程中初始加载程序动画冻结了几秒钟，这令人沮丧
我能做些什么使它平滑吗?
使用演示: 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>
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?
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>
这篇关于Angular pre-bootstrap(第一屏)加载程序的动画在初始加载过程中冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
