Eliminar el destello del contenido sin estilo

¿Cómo detengo el flash del contenido sin estilo (FOUC) en una página web?

Lo que he hecho para evitar el FOUC es:

  • Establezca la sección del cuerpo como:

  • Escriba una función de JavaScript js_Load() : document.body.style.visibility='visible';

Con este enfoque, el cuerpo de mi página web se mantiene oculto hasta que se carguen la página completa y los archivos CSS. Una vez que todo está cargado, el evento de carga convierte el cuerpo visible. Por lo tanto, el navegador web permanece vacío hasta que aparece todo en la pantalla.

Es una solución simple pero hasta ahora está funcionando.

El problema con el uso de un estilo css para ocultar inicialmente algunos elementos de la página, y luego usar javascript para cambiar el estilo a visible después de la carga de la página, es que las personas que no tienen javascript habilitado nunca podrán ver esos elementos. Entonces, es una solución que no se degrada graciosamente.

Por lo tanto, una mejor manera es usar javascript para ocultar inicialmente y también para volver a mostrar esos elementos después de la carga de la página. Usando jQuery, podríamos sentirnos tentados a hacer algo como esto:

 $(document).ready(function() { $('body').hide(); $(window).on('load', function() { $('body').show(); }); }); 

Sin embargo, si su página es muy grande con muchos elementos, entonces este código no se aplicará lo suficientemente pronto (el cuerpo del documento no estará listo lo suficientemente pronto) y es posible que aún vea un FOUC. Sin embargo, hay un elemento que PODEMOS ocultar tan pronto como se encuentre el script en el encabezado, incluso antes de que el documento esté listo: la etiqueta HTML. Entonces podríamos hacer algo como esto:

            

Tenga en cuenta que el método jQuery addClass () se llama * fuera * del método .ready () (o mejor, .on (‘carga’)).

Una solución que no depende de jQuery, que funcionará en todos los navegadores actuales y no hace nada en los navegadores antiguos, incluye lo siguiente en su etiqueta de cabecera:

  ...    

Gracias a @justastudent, intenté simplemente configurar elm.style.display="none"; y parece funcionar como se desea, al menos en el actual Firefox Quantum. Así que aquí hay una solución más compacta, siendo, hasta ahora, la cosa más simple que he encontrado que funciona.

  

Una solución solo de CSS:

    ...   ...     

A medida que el navegador analiza a través del archivo HTML:

  • Lo primero que hará es ocultar .
  • Lo último que hará es cargar los estilos y luego mostrar todo el contenido con el estilo aplicado.

La ventaja de esto sobre una solución que usa JavaScript es que funcionará para los usuarios incluso si tienen JavaScript desactivado.

Nota: puede poner dentro de . Sin embargo, lo veo como un inconveniente, porque viola la práctica común. Sería bueno si hubiera un atributo defer para como lo hay para , porque eso nos permitiría ponerlo en y aun así lograr nuestro objective.

Otra solución rápida que también funciona en Firefox Quantum es una etiqueta vacía en . Sin embargo, esto penaliza sus perspectivas de velocidad de página y el tiempo total de carga.

Tuve 100% de éxito con eso. Creo que también es la razón principal, por qué las soluciones anteriores con otras JS están en proceso.

  

Nadie ha hablado sobre CSS @import

Ese fue el problema para mí. Estaba cargando dos hojas de estilo adicionales directamente en mi archivo css con @import

Solución simple: reemplace todos los enlaces @import con