Come smettere di lampeggiare di contenuto inascolto

Question

Questa è solo una breve domanda, non ho un esempio ma sto usando un cms su misura e al momento non abbiamo accesso al capo della pagina web quindi qualche css deve essere posizionato all'esterno della testa causando un flash di contenuto non formattato al caricamento della pagina.

Basta chiedersi se qualcuno su di lei conosce una soluzione rapida con jquery o qualcosa per fermare questo.

So che mettere i CSS non in-linea è una cattiva pratica, ma mi chiedevo se c'è un round di lavoro.

Qualsiasi aiuto apprezzato

Answer 1

La soluzione di base per gestire FOUC è quello di tenerlo nascosto fino a quando non è stato correttamente stile.

Suppongo che tu abbia il controllo sul contenuto che viene visualizzato senza un programma? In tal caso, avvolgerlo in un <div id="some-div" style="display:none">... content ... </div>. Quindi utilizzare jQuery per mostrare quando l'intero documento è pronto:

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

Answer 2

aggiungere una classe al contenuto di nome no-fouc, impostare la classe al display: none nel file CSS comuni, quindi rimuovere la classe al caricamento della pagina. Il vantaggio di questa soluzione è che gestisce un numero arbitrario di elementi e può essere riutilizzato su tutte le pagine.

$(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>