¿Cuál es la forma correcta de ocultar elementos HTML en la carga de la página antes de que se muestren?

He encontrado numerosas respuestas parciales a esta pregunta, pero nada que parezca una respuesta definitiva. Para una técnica tan importante, encuentro esto un poco extraño.¿Cuál es la forma correcta de ocultar elementos HTML en la carga de la página antes de que se muestren?

¿Cómo debo ocultar elementos (usando javascript) para que no aparezcan brevemente cuando la página se carga antes de que el JS pueda ocultarlos? No quiero configurarlos inicialmente con CSS, como si un usuario no tuviera Javascript, no verán nada.

Para ser claros. No estoy preguntando cómo manejar la visualización de contenido a los usuarios que no tienen JS. Ese es un tema completamente diferente. Solo quiero una forma confiable de ocultar elementos HTML antes de que se muestren.

Así que mis requisitos: Elementos

HTML no se ocultan inicialmente el uso de CSS
Si JS está disponible, estos elementos están ocultos para que no se muestran nunca, ni siquiera por un instante. Esto significa esconderlos de JS cargados al final del cuerpo está fuera).

Fuente

2012-10-12 Undistraction

Suena como dos problemas separados. En primer lugar, ¿cómo se ocultan los elementos inicialmente, y en segundo lugar, qué haces si los clientes no tienen javascript (habilitado). Cuidado de no hacer estas preguntas. –

Creo que quizás usar [modernizr] (http://modernizr.com/) sería útil. Aún puede especificar el uso de CSS para ocultar elementos, por lo que para navegadores sin javascript, puede usar la clase '.no-js' para anular los estilos para mostrarlos. Pero no estoy tan seguro del "destello" inicial de los elementos que se muestran.Eso tiene que ver con cómo se estructura el código y cómo los navegadores web lo analizan y lo analizan. – VKen

@Erik Philips. Solo menciono ese requisito para evitar recibir respuestas como "configurar los elementos para mostrar: ocultos" en su hoja de estilo. – Undistraction

Como VKen, yo prefiero usar moderizr y Paul Irish's structure for the html element (que es lo que utiliza HTML5 Boilerplate)

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Luego en la hoja de estilos:

.element-to-hide { display: none; } 

.no-js .element-to-hide { display: block; }

Funciona muy bien, sin flash de elementos que desaparecen.

Fuente

2012-10-12 16:54:33 steveax

Una solución es utilizar javascript para incluir un archivo CSS opcional en el que se ocultan esos divs.

Ponga esto en su sección HEAD:

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

Y en hiding.css:

div.mySelector { 
    display:none; 
}

Si usted no tiene css adicional para establecer, es posible también más simplemente inline el css regla en javascript (aún en la CABEZA):

<script> 
document.write('<style type="text/css">div.mySelector {display:none; }</style>'); 
</script>

Si Javascript no está disponible, el div s no estará oculto Y si está disponible, el CSS se usará para ocultar el div antes de que se muestre.

Fuente

2012-10-12 16:44:39

Gracias. ¿Cuál es el soporte del navegador para este enfoque? – Undistraction

Uso la generación de enlaces CSS en javascript en todos los navegadores modernos y no veo por qué habría incompatibilidades en los más antiguos. –

Utilice un combinador descendiente y convierta el cuerpo en miembro de una clase lo antes posible.

<style> 
    /* js only element */ 
    .js foo { display: none; } 
</style> 
</head> 
<body> 
<script> document.body.className += " js"; </script>

Fuente

2012-10-12 16:44:49 Quentin

Gracias. Pero, ¿se garantiza que JS se ejecutará antes de que se muestre la página? – Undistraction

Este es en realidad mi método preferido. Se ejecuta inmediatamente, ya que no depende de cargar ninguna biblioteca y es una de las soluciones más simples. Nunca he tenido problemas al usar este método. –

que podría hacer una etiqueta <noscript> y sobrescribir el css inicial para aquellos con JavaScript desactivado

Fuente

2012-10-12 16:45:31 user733421

¿Cuál es la forma correcta de ocultar elementos HTML en la carga de la página antes de que se muestren?

Respuesta

Cuestiones relacionadas