Quiero ocultar un div usando Javascript, tan pronto como la página se cargue en el navegador. Puedo hacerlo si uso el siguiente código:

document.getElementById("div_id").style.display='none';

Pero, cuando trato de hacer lo mismo con JQuery, noto que el div es visible durante un par de segundos después de cargar la página, y luego se oculta. El código JQuery que uso es

$(document).ready(function() {

$("#div_id").css('display','none');

});

Lo mismo sucede si uso $("#div_id").hide(); ¿Esto se debe a que estoy usando una biblioteca, lo que ralentizaría un poco el proceso, en lugar de usar directamente document.getElementById? . Cualquier forma de arreglar esto ?

Gracias.

1
rogerp 17 oct. 2009 a las 00:45

6 respuestas

La mejor respuesta

Primero, use $("#div_id").hide();. Es más idiomático para jQuery.

Segundo, es porque estás usando $(document).ready. Por lo general, ese evento no se activa hasta que el DOM esté disponible para su uso. Sin embargo, debido a la forma en que se implementa bindReady(), es posible en algunos navegadores que este evento sea equivalente al evento onload, que no se activará hasta que se cargue todo . Desafortunadamente, la única forma que conozco para evitar esto (eso no causa problemas a los usuarios discapacitados que no pueden usar JavaScript debido a un lector de pantalla) es establecer un tiempo de espera corto (por ejemplo, 50 ms) y verificar repetidamente existencia de $("#div_id") mientras se carga la página. Este es un truco horrible , y dudo en recomendarlo, pero debería funcionar. Dicho esto, es mejor que solo aceptes el destello de contenido, sabiendo que la mayoría de los usuarios no lo verán.

2
Bob Aman 16 oct. 2009 a las 21:05

Lo más probable es que esté esperando hasta que el documento esté listo para ocultarlo. Esto parece más un trabajo para el script del lado del servidor si lo desea oculto de forma predeterminada.

-1
justin 16 oct. 2009 a las 20:49

Creo que la razón es que el DOM se carga progresivamente y el evento $ (document) .ready está esperando que el DOM se cargue completamente antes de ejecutarse.

Si realmente desea que el elemento sea invisible cuando se carga la página, ¿puede definir ese estilo en su CSS?

No he intentado esto, pero si todavía desea que el div sea visible para usuarios que no tienen Javascript, creo que podría hacer algo como esto:

<noscript>
  <style type="text/css">
  #elementid {display: block !important;}
  </style>
</noscript>
0
Steve Wortham 16 oct. 2009 a las 21:04

Puede deberse a la forma en que incluye los scripts. El navegador tiene que descargarlos antes de ejecutarlos. Entonces, si tiene muchos archivos js, esto puede causar este problema.

0
googletorp 16 oct. 2009 a las 20:49

Creo que una mejor opción sería diseñar el div para que esté oculto cuando se escribe la página, sin javascript.

Luego, cuando esté listo para mostrarlo nuevamente, use javascript para mostrarlo:

$('#someId').show();
0
TM. 16 oct. 2009 a las 20:48

Hay una solución fácil para esto. Configure una clase CSS de la siguiente manera

.js #div_id { display: none; }

Entonces tenga el siguiente jQuery

$('html').addClass('js');

$(document).ready(function() {

    /* normal code to run when DOM has loaded here */

});

El <div> se ocultará inmediatamente (sin flashes) si los usuarios tienen habilitado JavaScript y no lo estarán si no lo hacen (lo que evita posibles problemas de degradación elegante como meder señala en su opción c).

Esto funciona porque cuándo se puede acceder inmediatamente al elemento <html> cuando la página comienza a cargarse.

La razón por la que document.getElementById("div_id").style.display='none'; está funcionando probablemente es porque lo tiene en <body> después del elemento y, por lo tanto, el script no espera todo DOM para cargar antes de ejecutar.

9
Community 23 may. 2017 a las 10:27