Comment arrêter le flash de contenu non stylé (FOUC) sur une page Web ?
Réponses
Trop de publicités?
Lawrence Dol
Points
27976
Une solution qui ne dépend pas de jQuery, qui fonctionnera sur tous les navigateurs actuels et ne fera rien sur les anciens navigateurs, inclut ce qui suit dans votre balise de tête :
<head>
...
<style type="text/css">
.fouc-fix { display:none; }
</style>
<script type="text/javascript">
try {
var elm=document.getElementsByTagName("html")[0];
var old=elm.class || "";
elm.class=old+" fouc-fix";
document.addEventListener("DOMContentLoaded",function(event) {
elm.class=old;
});
}
catch(thr) {
}
</script>
</head>
Grâce à @justastudent, j'ai essayé de définir juste elm.style.display="none"; et il semble fonctionner comme souhaité, au moins dans Firefox Quantum actuel. Voici donc une solution plus compacte, étant, jusqu'à présent, la chose la plus simple que j'ai trouvée qui fonctionne.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
Paul Cream
Points
183
Une autre solution rapide qui fonctionne également dans Firefox Quantum est une balise vide <script> dans le <head>. Cela pénalise toutefois vos informations de vitesse de page et le temps de chargement global.
J'ai eu 100% de succès avec ça. Je pense que c'est aussi la raison principale, pourquoi au-dessus des solutions avec d'autres JS dans les travaux.
<script type="text/javascript">
</script>
