我开发了一个 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 应用程序已准备就绪并显示。所以结果是一个卡住的加载动画,然后 app = 情况并不比以前好......
顺便说一句:在此加载期间,Javascript(例如 setInterval
)也不会执行。我尝试将 vendor.js
包含在 async
和 defer
中,但没有成功。
有什么想法吗?
编辑:似乎是 Google Chrome 的问题 - 使用 Firefox 动画效果流畅。
最佳答案
我使用 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>
关于javascript - Angular 2加载动画卡住,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44515090/