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加載動畫凍結

回答

相關問題