AngularJS等待CSS延遲加載

Question

我有一個一頁應用程序，其中我使用angular-css-injector在每次“頁面”更改中都注入了CSS。

加載頁面時，一秒鍾的時間看起來並不好，然后css加載，一切都很好。 如何等待CSS加載，然后顯示頁面？ （同時，我會顯示一個加載程序）。

我檢查了一下，發現加載CSS時沒有回調。

我不想提前加載css，因為某些模塊可能具有相同的類，並且我沒有時間處理這些混亂。

Answer 1

CSS解決方案

在開始加載的基本css表中，將body標簽設置為不顯示或不顯示0。然后在加載角css時，使用顯示塊或不透明度1。

在styles.css中（或您所說的主要CSS）中就這樣

body {
    display: none;
    // or
    opacity: 0;
}

Answer 2

正確的方法是使用SCSS，該方法在每個組件選擇器下編寫SCSS代碼，因此不會發生重疊。

對於建議的情況，最好編寫自己的注射器，這樣就可以控制文件的加載。 它可以像您想要構建的那樣基本或復雜，例如：

var client = new XMLHttpRequest();
client.open('GET', '/component/style.css');
client.onreadystatechange = function() {
  document.querySelector("style#dynamic").innerHTML = client.responseText;
}
client.send();