Vermeiden Sie es, Inhalte anzuzeigen, bevor das Stylesheet mit ng-href geladen wurde.

Question

Ich möchte ng-href verwenden, um verschiedene Designs zu laden.

Das Problem besteht darin, dass der unstrukturierte Inhalt angezeigt wird, bevor das Stylesheet angewendet wird.

ich ein Plunker gemacht, wenn Sie die letzten drei Versionen vergleichen, Ich habe gerade Linie 8

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

<link ng-href="//netdna.bootstrapcdn.com/bootstrap/{{styleVersion}}/css/bootstrap.min.css" rel="stylesheet"> 

Wenn ich ng-href statt href Sie die unstyled HTML für eine Sekunde sehen kann, was ich vermeiden müssen.

Also meine Frage ist, ob es möglich warten, bis das Stylesheet geladen ist oder gibt es eine bessere Lösung für dieses Problem dann ng-href

Answer 1

ich die Plunker basierend auf dem Feedback bearbeiten ich es auf Dynamically loading CSS in angularjs (loading delay)

Grundsätzlich gefunden tut 3 Dinge:

1. Legen Sie eine start.css Datei mit:

   html, body{ 
       display: none 
   } 
   

2. Laden Sie Ihre ng-href CSS
3. laden eine end.css Datei, die den Stil des Körpers zu display: block

Es ist ein Hack, aber es scheint zu funktionieren setzt zurück.