AngularJS wartet auf CSS Lazy Loading

Question

Ich habe eine One-Page-App, in der ich Angle-Css-Injektor verwenden, um CSS auf jeder "Seite" zu ändern.

Beim Laden der Seite sieht es für einen Bruchteil einer Sekunde nicht gut aus, und dann lädt das CSS, und alles ist gut. Wie kann ich warten, bis das CSS geladen wird, und dann die Seite anzeigen? (In der Zwischenzeit zeige ich einen Lader).

Ich überprüfte und fand, dass es keinen Rückruf gibt, als das CSS geladen wurde.

Ich möchte nicht die CSS im Voraus laden, weil einige Module die gleichen Klassen haben und ich habe keine Zeit, um diese Unordnung zu behandeln.

Answer 1

Ein richtiger Weg, dies zu tun SCSS verwendet, in denen SCSS Code unter jedem Komponente Wähler zu schreiben, so würde keine Überlappung passieren.

Für den vorgeschlagenen Fall ist es am besten, einen eigenen Injektor zu schreiben, damit Sie das Laden der Datei steuern können. Es kann so einfach oder so kompliziert sein, wie Sie es bauen möchten, zum Beispiel:

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

Answer 2

Css Lösung

In Ihrem grundlegenden CSS-Blatt, das den Body-Tag am Anfang lädt in setzt keine oder Opazität anzuzeigen 0. dann auf Last des Winkel CSS Anzeigeblockes oder Opazität 1.

wie dies in styles.css (oder was auch immer Sie Ihren Haupt-CSS nennen)

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