Cómo oculto un elemento HTML antes de que cargue la página

Tengo un código de JQuery que muestra u oculta un div.Cómo oculto un elemento HTML antes de que cargue la página

$("div#extraControls").show(); // OR .hide()

Inicialmente quieren que el div a ser no visible así que utilicé:

$(document).ready(function() { 
    $("div#extraControls").hide(); 
});

Sin embargo, en el navegador, el contenido se carga visibles por un segundo antes de desaparecer, que no es lo que quiero.

¿Cómo configuro el elemento para ocultarlo antes de que se cargue la página sin perder la capacidad de mostrarlo de forma dinámica con un script?

Fuente

2010-06-01 Robert

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(document).ready(function() { 
    $("div#extraControls").removeClass("hidden"); 
});

Fuente

2010-06-01 15:33:09

+1 Una cosa a tener en cuenta es que si el usuario ha desactivado JavaScript en el navegador, toda la página permanece oculta. –

Desde mi experiencia, algunos navegadores no cargarán medios (por ejemplo, imágenes) en elementos que están ocultos usando 'display: none' u' opacity: 0'. Yo recomendaría usar 'visibility: hidden' en su lugar. – mqchen

@ mq.chen Gracias por la advertencia, sin embargo, la etiqueta de visibilidad no permite que el contenido se alterne con el comando .hide(). – Robert

En CSS:

#extraControls { display: none; }

O en HTML:

<div id="extraControls" style="display: none;"></div>

Fuente

2010-06-01 15:32:39 Caleb

Lo que podría hacer es insertar una línea script etiqueta al final del documento, o inmediatamente después de la div con id "extraControls". Debería ser fuego un poco antes que.

<div id="extraControls">i want to be invisible!</div> 
<script type="text/javascript">$("div#extraControls").hide()</script>

Por supuesto, usted puede hacer esto en el servidor, así, pero tal vez hay una buena razón por la que no quiere hacer eso (como, tienen los controles visibles si el navegador no soporta JavaScript).

Fuente

2010-06-01 15:33:56 CharlesLeaf

hacer una clase css

.hidden { 
display: none; 
}

añadir esto a cualquier elemento que no desea que sean visibles al cargar la página. Luego use $("div#extraControls").show(); para volver a mostrarlo.

Fuente

2010-06-01 15:37:49 OMGKurtNilsen

#toggleMe //Keep this in your .css file 
{ 
display:none; 
visibility:inherit; 
background-color:#d2d8c9;  
} 


<a href="#" onclick="return false;">Expand Me</a> 
///this way u can make a link to act like a button too 

<div id="toggleMe"> //this will be hidden during the page load 
    //your elements 
</div> 

///if you decide to make it display on a click, follow below: 
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project 
<script type="text/javascript"> 
$(document).ready(function() { 
     $("a").click(function() { 
      $('#toggleMe').toggle("slow"); //Animation effect 
     }); 
    }); 
</script> 

///Now for every alternate click, it shows and hides, but during page load; its hidden. 
//Hope this helps you guys ...

Fuente

2011-04-11 01:48:15 Ravi

Con CSS3 puede ocultar el contenido hasta que una página se cargue aprovechando el selector :only-child.

Here is a demonstration of how to do this. La idea básica es que CSS al cargar agregará un solo nodo al DOM mientras carga ese nodo y sus nodos secundarios. Además, una vez que se agrega un segundo hijo al nodo principal dado, la regla del selector :only-child está rota. Emparejamos con este selector y configuramos display: none para ocultar el nodo dado.

<!doctype html> 

<html> 

    <head> 
    <title>Hide content until loaded with CSS</title> 
    <style type="text/css" media="screen"> 
     .hide-single-child > :only-child { 
     display: none; 
     } 
    </style> 
    </head> 

    <body> 
    <div class='hide-single-child'> 
     <div> 
     <h1>Content Hidden</h1> 
     <script> 
      alert('Note that content is hidden until you click "Ok".'); 
     </script> 
     </div> 
     <div></div> 
    </div> 
    </body> 

</html>

Fuente

2013-12-25 12:58:32

La mejor manera de cargar función de JavaScript sobre la página se carga, es

$(window).bind("load", function() { 
    // code here 
});

En su caso

div.hidden 
{ 
    display: none 
} 

<div id="extraControls" class="hidden"> 
</div> 

$(window).bind("load", function() { 
    $("div#extraControls").removeClass("hidden"); 
});

Fuente

2017-09-14 14:00:34 drafiko

Cómo oculto un elemento HTML antes de que cargue la página

Respuesta

Cuestiones relacionadas