DESARROLLADOR

Cómo evitar el flasheo de contenido sin estilo en su sitio web

Explore formas de evitar que aparezca Flash of Unstyled Content (FOUC) en su sitio, o al menos reduzca la probabilidad de que su sitio se vea afectado por él.

Estoy seguro de que ha visto páginas cargadas con contenido sin estilo y luego
Puede tardar unos segundos (o minutos) en ver el contenido de la página
Aspecto y sensación esperados.En el diseño web, este sesgo es
Conocido como Flash of Unexpected Content (FOUC).La Figura A muestra un
Un ejemplo de una excepción FOUC que no pudo cargar CSS en la página de inicio de CNN EE. UU.

Figura A

Como evitar el flasheo de contenido sin estilo en su

Ver vista ampliada de la Figura A.

En esta publicación, compartiré algunos antecedentes sobre FOUC y luego describiré el método.
Evite que FOUC aparezca en su sitio web o al menos redúzcalo
Independientemente del navegador o
equipo.

una breve historia

Cuando FOUC se documentó por primera vez en el artículo de 2001 Flash of Unstyled Content, el problema parecía ser exclusivo de Internet Explorer.Entonces la falla la encontró
Camino a Safari en 2006 y descrito en el artículo El Problema FOUC.dos artículos
Expone las irregularidades inherentes del renderizado CSS
Estos dos navegadores y su incapacidad para representar contenido con estilo de manera consistente
Base.indicaciones recientes
FOUC también ocurre en algunas implementaciones de JavaScript y jQuery donde
Los scripts se utilizan para estilos, imágenes y, en general, contenido que lleva mucho tiempo.
O cuelgue después de cargar la página.

LEER  La plataforma universal de Windows se muestra en Build 2016

Técnicas para minimizar FOUC

La primera técnica está cubierta en el tutorial FOUC de Brad Baxter.Describe un método simple para minimizar FOUC ocultando toda o parte de la información.
página web hasta que todo el estilo y javascript estén hechos a través de la clase apply
Nombre «js» como un selector que oculta todo en el contenedor
tiene un id=»fouc». El elemento «fouc» no se oculta usando
Función getElementById de JavaScript que establece el valor de visualización en «bloquear»
calificación.

Los ejemplos dados en la breve introducción incluyen