Cómo detener el flash del contenido sin estilo

Question

Esta es solo una pregunta breve, realmente no tengo un ejemplo, pero estoy usando un cms hecho a medida y en este momento no tenemos acceso al encabezado de la página web así que algunos css tiene que ser colocado fuera de la cabeza causando un destello de contenido sin estilo en la carga de la página.

Solo me pregunto si alguien de ella conoce una solución rápida con jquery o algo para detener esto.

Sé que poner CSS que no está en línea es una mala práctica, pero me preguntaba si hay una ronda de trabajo.

Cualquier ayuda apreciado

Answer 1

La solución básica para manejar FOUC es mantenerlo oculto hasta que haya sido diseñada adecuadamente.

Supongo que tiene control sobre el contenido que se muestra sin estilo? En ese caso, envuélvalo en un <div id="some-div" style="display:none">... content ... </div>. A continuación, utilice jQuery para mostrarla cuando todo el documento está listo:

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

Answer 2

agregar una clase al contenido llamado no-fouc, establecer la clase de display: none en el archivo CSS común, a continuación, retire la clase al cargar la página. La ventaja de esta solución es que maneja una cantidad arbitraria de elementos y puede reutilizarse en todas las páginas.

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