css - attribute - Elimina el flash de contenido sin estilo
title html attribute (7)
¿Cómo detengo el flash de contenido sin estilo (FOUC) en una página web?
El problema con el uso de un estilo css para ocultar inicialmente algunos elementos de la página, y luego el uso de 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. Así que es una solución que no se degrada con gracia.
Por lo tanto, una mejor manera es usar javascript para ocultar inicialmente y volver a mostrar esos elementos después de cargar la página. Usando jQuery, podríamos estar 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 el script se encuentra en la cabecera, incluso antes de que el documento esté listo: la etiqueta HTML. Así que podríamos hacer algo como esto:
<html>
<head>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$(''html'').addClass(''hidden'');
$(document).ready(function() { // EDIT: From Adam Zerner''s comment below: Rather use load: $(window).on(''load'', function () {...});
$(''html'').show(); // EDIT: Can also use $(''html'').removeClass(''hidden'');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
Tenga en cuenta que el método jQuery addClass () se llama * outside * del método .ready () (o mejor dicho, .on (''load'')).
Este es el que me ha funcionado y no requiere javascript y funciona muy bien para páginas con muchos elementos y muchos css:
Primero, agregue una configuración <STYLE> dedicada para la etiqueta <HTML> con visibilidad ''oculta'' y opacidad como ''0'' en la parte superior de su HTML, por ejemplo, al principio del elemento <HEAD> , por ejemplo, en la parte superior de su HTML añadir :
<!doctype html>
<html>
<head>
<style>html{visibility: hidden;opacity:0;}</style>
Luego, al final de su último archivo de hoja de estilo .css , establezca los estilos de visibilidad y opacidad en ''visible'' y ''1'', respectivamente:
html {
visibility: visible;
opacity: 1;
}
Si ya tiene un bloque de estilo para la etiqueta ''html'', mueva todo el estilo ''html'' al final del último archivo .css y agregue las etiquetas ''visibilidad'' y ''opacidad'' como se describe anteriormente.
https://gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb0
Lo que he hecho para evitar la FOUC es:
Establezca la sección del cuerpo como:
<body style="visibility: hidden;" onload="js_Load()"><body style="visibility: hidden;" onload="js_Load()">Escriba una función
js_Load()JavaScript:document.body.style.visibility=''visible'';
Con este enfoque, el cuerpo de mi página web se mantiene oculto hasta que se cargan la página completa y los archivos CSS. Una vez que todo está cargado, el evento onload convierte el cuerpo en visible. Por lo tanto, el navegador web permanece vacío hasta un punto en el que todo aparece en la pantalla.
Es una solución simple pero hasta ahora está funcionando.
Nadie ha hablado de 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 <link />
Otra solución rápida que también funciona en Firefox Quantum es una etiqueta <script> vacía en <head> . Sin embargo, esto penaliza las perspectivas de velocidad de página y el tiempo de carga general.
Tuve un 100% de éxito con ella. Creo que también es la razón principal, por lo que las soluciones anteriores con otros JS están en proceso.
<script type="text/javascript">
</script>
Una solución que no depende de jQuery, que funcionará en todos los navegadores actuales y no hará nada en los navegadores antiguos, incluye lo siguiente en su etiqueta de cabecera:
<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>
Gracias a @justastudent, intenté simplemente configurar elm.style.display="none"; y parece funcionar como se desea, al menos en la versión actual de Firefox Quantum. Así que aquí hay una solución más compacta, siendo, hasta ahora, lo más simple que he encontrado que funciona.
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
Una solución solo para CSS:
<html>
<head>
<style>
html {
display: none;
}
</style>
...
</head>
<body>
...
<link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
</body>
</html>
A medida que el navegador analiza a través del archivo HTML:
- Lo primero que hará es ocultar
<html>. - 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 utiliza JavaScript es que funcionará para los usuarios incluso si tienen JavaScript deshabilitado.
Nota: se allowed permite poner <link> dentro de <body> . Sin embargo, lo veo como un inconveniente, porque viola la práctica común. Sería bueno si hubiera un atributo de defer para <link> como existe para <script> , porque eso nos permitiría ponerlo en <head> y seguir cumpliendo con nuestro objetivo.