Eliminar flash de contenido sin estilo

0

Lo que he hecho para evitar FOUC es:

Establecer la sección del cuerpo como: <body style="visibility: hidden;" onload="js_Load()">
Escribe un js_Load() función de JavaScript: 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 el momento está funcionando.

Fuente

2011-05-12 19:23:10

+31

No es bueno si un espectador no tiene javascript habilitado, porque entonces no verá nada. – Stefan

+9

-1 por sugerir una solución que no mostrará NADA para los usuarios que no tienen activado javascript, o están en un lector de pantalla que no admite javascript o que están detrás de un firewall corporativo que bloquea javascript. Google "eliminar flash de contenido no deseado" mostrará numerosos enfoques que no tienen este defecto. Por ejemplo, la respuesta de Stefan (un año después) es mucho más segura. – ToolmakerSteve

+4

Realmente debería agregar ' 'al final para que el sitio también funcione con JS deshabilitado. – tomasz86

57

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

Una mejor manera, por lo tanto, es usar javascript para ocultar inicialmente y también para 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 una gran cantidad de elementos, a continuación, este código no se aplica suficientemente pronto (el cuerpo del documento ganó' t estar listo lo suficientemente pronto) y es posible que todavía 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. 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 * * fuera del método() (o mejor, .en ('carga')) ready.

Fuente

2012-03-22 13:41:30 Stefan

+1

¡Excelente publicación! Esto ayudó a solucionar un problema que tuve que resolver. ¡Gracias! –

+3

Para mí, parece más limpio reemplazar '$ ('html'). Show() '' con '$ (' html '). RemoveClass (' hidden ');'. Esto hace que sea más claro que la función ready está deshaciendo el 'addClass'. – ToolmakerSteve

+4

ACTUALIZACIÓN: Acabo de probar este enfoque. La versión actual de jQuery REQUIERE que esto se haga usando 'removeClass' (como sugiero) en lugar de' show' (como en la respuesta original); de lo contrario, el html NUNCA se mostrará. Creo que el show de jQuery() ahora busca y restaura explícitamente cualquier estado de visualización del estilo css, para evitar interferir con el estilo. Por lo tanto, es necesario eliminar realmente la clase 'oculta'. – ToolmakerSteve

11

Una solución que no depende de jQuery, que funcionará en todos los navegadores actuales y no hacer nada en los navegadores antiguos, incluya lo siguiente en su etiqueta de la cabeza:

<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, probé simplemente configurando elm.style.display="none"; y parece funcionar como se desee, 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.

<script type="text/javascript"> 
    var elm=document.getElementsByTagName("html")[0]; 
    elm.style.display="none"; 
    document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; }); 
</script>

Fuente

2014-02-10 03:16:10

+0

el código mencionado no funcionó para mí, aquí está mi versión: try { var html = document.getElementsByTagName ("html") [0]; document.addEventListener ("DOMContentLoaded", function (event) {html.className = '';}); html.className = 'fouc'; } catch (err) {} –

+0

Me gusta este enfoque, pero me gustaría sugerir el uso de ['classList'] (https://developer.mozilla.org/en-US/docs/Web/API/ Element/classList) API. –

+1

De hecho, ¿por qué usar el CSS por separado en primer lugar? ¿Por qué no hacer 'elm.style.display = 'none';' y luego deshacerlo con 'elm.style.removeProperty ('display');'? –

7

Una solución CSS-solamente:

<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 a través de una solución que utiliza JavaScript es que va a trabajar para los usuarios, incluso si tienen JavaScript desactivado.

Nota: usted es allowed para 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 defer para <link> como existe para <script>, porque eso nos permitiría ponerlo en el <head> y aun así lograr nuestro objetivo.

Fuente

2017-05-06 17:38:24

1

Nadie ha hablado de CSS @import

Ese era el problema para mí que estaba cargando dos hojas de estilo adicionales directamente en mi archivo css con @import

solución simple: reemplazar todos los @import enlaces con <link />

Fuente

2017-05-12 14:57:59 danidee

0

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

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

<script type="text/javascript"> 

</script>

Fuente

2017-11-17 10:16:46

Eliminar flash de contenido sin estilo

Respuesta

Cuestiones relacionadas