Ocultar el contenido de una página hasta que se carguen todos sus elementos.
Ideal para páginas con muchas imágenes o galerías.
El fin es evitar que el usuario haga clic sobre una imagen mientras otras aun estén en proceso de carga, lo cual pudiere evitar que dicho proceso culmine exitosamente.
Método 1
Este procedimiento ha sido probado tanto para Internet Explorer como para Mozilla Firefox
1.- Colocar el siguiente javascript entre <head> y </head>
<script language="JavaScript" type="text/javascript">
function muestraGranDiv(){
document.getElementById('granDiv').style.visibilit y = "visible";
document.getElementById('cargando').style.visibili ty = "hidden";
}
</script>
2.- Cargar javascript (invocar función) en body mediante evento onLoad
<body onload="muestraGranDiv()">
3.- Colocar DIVs dentro del body
<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><span class="fontloadingcont">Loading content. Please wait...</span></div>
<div id="granDiv" style="visibility:hidden;">
resto del contenido dentro del DIV
<div>
El div de id="cargando", se usaría para colocar una advertencia al usuario, con la intención de que espere mientras se carga el contenido de la página. Fíjese que,
obligatoriamente este div id="cargando", debe estar antes del div id="granDiv"
Para el aviso al usuario sobre la espera mientras se carga el contenido, puede usarse una
imagen en vez de texto:
<div id="cargando" style="width: 100%; height: 500px; position: absolute; padding-top:20px; text-align:center"><img src="loading_content.gif"></div>
<div id="granDiv" style="visibility:hidden;">
resto del contenido dentro del DIV
<div>
El class="fontloadingcont" es el siguiente (puede ser usado como CSS interna o en un archivo CSS externo y es
opcional):
<style type="text/css">
.fontloadingcont {
font-size: 20px;
font-weight: bold;
}
</style>
Si no desea usar un estilo CSS sobre el texto, no será necesario que mantenga las etiquetas <span></span>
Método 2
Otra posible forma de conseguir el objetivo
1.- Deshabilitar los links de las imágenes para que no ejecuten la función correspondiente
<a href="pagina.htm" onclick="return false"><img src="imagen.jpg" /></a>
2.- Colocar el siguiente javascript dentro de <head> y </head>
<script type="text/javascript">
function enlaces(){
for(m=0; m<document.getElementsByTagName('a'); m++){
document.getElementsByTagName('a')[m].onclick= function(){return true}
}
}
</script>
3.- Invocar la función dentro del body, mediante el evento onLoad
<body onload="enlaces()">
****************************************** Aviso:
Esta breve ayuda es un simple resumen de un tópico encontrado en la sección
Javascript, bajo el número
228025. Sin embargo, la idea original proviene del usuario
claray y una respuesta emitida por él en el tópico de número
224815. Posteriormente, la moderadora
tunait aportó información para
ampliar la ayuda y mejorar los códigos, permitiendo su compatibilidad tanto con Internet Explorer como con Mozilla, e incluso agregando posibilidad de colocar una
advertencia para que el usuario espere mientras carga la página. El Método 2, proviene también como aporte de la moderadora
tunait.
El resumen es aporte del usuario
Khronos, quien no pretende atribuirse crédito alguno de las ideas provenientes de los autores(as) originales.