Wie Flash von unstyled Inhalt zu stoppen

Dies ist nur eine kurze Frage, ich habe nicht wirklich ein Beispiel, aber die ich benutze eine maßgeschneiderte cms und derzeit haben wir keinen Zugriff auf den Kopf der Webseite so etwas css muss außerhalb des Kopfes platziert werden, was beim Laden der Seite einen Flash-Effekt mit nicht formatierten Inhalten verursacht.Wie Flash von unstyled Inhalt zu stoppen

Ich frage mich nur, ob jemand auf ihr eine schnelle Lösung mit jQuery oder etwas weiß, um dies zu stoppen.

Ich weiß, CSS zu setzen, das nicht inline ist, ist eine schlechte Übung, aber ich frage mich, ob es eine Arbeitsrunde gibt.

Jede Hilfe willkommen

Quelle

2012-07-24 Ashley Briscoe

Die Basislösung zu behandeln FOUC es versteckt zu halten, bis es richtig gestylt wurde.

Ich nehme an, dass Sie Kontrolle über den Inhalt haben, der unstyled angezeigt wird? In diesem Fall wickeln Sie es in eine <div id="some-div" style="display:none">... content ... </div>. Dann jQuery verwenden, es zu zeigen, wenn das gesamte Dokument bereit ist:

$(function() { $("#some-div").show(); });

Quelle

2012-07-24 22:33:16

THATS großer Dank, wenn JS diabled ist nicht, dass der Benutzer bedeutet den Inhalt nicht sehen? –

Ja, das stimmt. Es erfordert, dass JS funktioniert. –

Das DOMContentLoaded-Ereignis wartet nicht darauf, dass Stylesheets heruntergeladen, analysiert und angewendet werden. Zweitens: Der Browser wendet keine Formatierung auf den Inhalt an, der mit display ausgeblendet ist: none; –

Fügen Sie eine Klasse auf den Inhalt no-fouc genannt, stellen Sie die Klasse zu display: none in der gemeinsamen CSS-Datei, entfernen Sie dann die Klasse auf Seite laden. Der Vorteil dieser Lösung ist, dass sie eine beliebige Anzahl von Elementen verarbeitet und auf allen Seiten wiederverwendet werden kann.

$(function() { 
 
    $('.no-fouc').removeClass('no-fouc'); 
 
    $('#dialog').dialog(); 
 
});

.no-fouc { 
 
    display: none; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="no-fouc"> 
 
    <div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
</div>

Quelle

2017-11-21 15:37:43

Wie Flash von unstyled Inhalt zu stoppen

Antwort

Verwandte Themen