JavaScript-Ocultar un Div al inicio (cargar)

Tengo un div en mi página php que usa jQuery para ocultarlo una vez que la página se ha cargado. Pero, ¿hay alguna forma de ocultarlo desde el principio de loadup?

La razón por la que pregunto es porque durante un breve segundo, puede ver el div cuando la página se está cargando, y luego se oculta cuando la página está completamente cargada.

Parece poco profesional.

Sólo me pregunto si hay una manera de evitar esto?

Gracias

Author: pylover, 2012-04-14
Source

6 answers

Utilice el estilo css para ocultar el div. 

#selector { display: none; }

O utilícelo como abajo,

CSS: 

.hidden { display: none; }

HTML 

<div id="blah" class="hidden"><!-- div content --></div>

Y en jQuery 

 $(function () {
     $('#blah').removeClass('hidden');
 });
 69
Author: Selvakumar Arumugam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-13 21:40:37

He tenido el mismo problema.

Usar CSS para ocultar no es la mejor solución, porque a veces quieres que los usuarios sin JS puedan ver el div.. La solución más limpia es ocultar el div con jQuery. Pero el div es visible alrededor de 0.5 segundos, lo cual es problemático si el div está en la parte superior de la página.

En estos casos, utilizo una solución intermedia, sin jQuery. Este funciona y es inmediato :

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>

Por supuesto, todavía puede agregar todos los efectos que desea en el div, jQuery toggle () por ejemplo. Y obtendrás el mejor comportamiento posible (en mi humilde opinión) :

  • para usuarios no JS, el div es visible directamente
  • para los usuarios de JS, el div está oculto y tiene efecto toggle.
 6
Author: David G,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-01 09:57:51

Salvo la solución CSS. La forma más rápida posible es ocultarlo inmediatamente con un script.

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

En este caso recomendaría la solución CSS de Vega. Pero si necesitas algo más complejo (como una animación) puedes usar este enfoque.

Esto tiene algunas complicaciones (ver comentarios a continuación). Si desea que este script se ejecute lo más rápido posible, no puede usar jQuery, usar solo JS nativo y aplazar la carga de todos los demás scripts.

 5
Author: Halcyon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-31 12:28:31

¿Por qué no agregar "display: none;" al atributo de estilo divs? Eso es todo jQuery .la función hide () lo hace.

 1
Author: Moo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-13 21:41:18

Este método he utilizado mucho, no estoy seguro de si es una muy buena manera, pero funciona bien para mis necesidades.

<html>
<head>  
    <script language="JavaScript">
    function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
    </script>
</head>
<body>
    <div id="HiddenStuff1" style="display:none">
    CONTENT TO HIDE 1
    </div>
    <div id="HiddenStuff2" style="display:none">
    CONTENT TO HIDE 2
    </div>
    <div id="HiddenStuff3" style="display:none">
    CONTENT TO HIDE 3
    </div>
    <input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
    <input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
 1
Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-22 15:22:22

Usando CSS puede configurar display: none para el elemento en un archivo CSS o en un atributo de estilo

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

O tener el js justo después del div podría ser lo suficientemente rápido también, pero no tan limpio

 0
Author: GillesC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-13 21:41:32