Angular 2加载动画冻结

我开发了一个Angular 2应用程序，它有相当大的尺寸，需要一些时间来加载（vendor.js大约5 MB）。Angular 2加载动画冻结

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

：为了使时间有点更舒适的用户我用CSS动画（加载条）或GIF动画（我试着两者）的方式所代替标准

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

或因为动画

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

但这一切工程（CSS或GIF）页面加载时停止，当它延续了角的应用程序已准备就绪，并显示。因此，结果是一个冻结的加载动画，然后应用程序=情况不比以前更好...

BTW：Javascript（例如setInterval）也没有执行在此加载时间。我试图包括vendor.js与async和defer但没有成功。

任何想法？

编辑：似乎是一个谷歌浏览器的问题 - 使用Firefox的动画工作顺利。

来源

2017-06-13 D. Bauer

有在Firefox同样的问题也是如此。 –

一个迟到的评论，但我只是在你的问题上磕磕绊绊。 Angular支持模块延迟加载。 5 MB对于应用来说太过分了，不要一次加载它。加载您的主页，然后延迟加载其他模块。 –

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

我在使用CSS的个人网站上使用加载微调器，只是以为我会分享我的代码，因为它适用于我，并且似乎没有任何大代码库的问题。很明显，如果这个结果为你工作，你会想要根据你的需要进行调整。

在HTML：

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

在CSS：

.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; 
}

来源

2018-02-08 01:56:17

Angular 2加载动画冻结

回答

相关问题