Mostrar progreso de carga de la página

josemari11 · #1 (**permalink**) 08/05/2008, 04:40

Hola a todos.

Tengo un album web dinámico (php claro está) que lee las miniaturas de un directorio y las va mostrando y enlaza con las fotos en tamaño original.

Pues bien. Le puse el efecto de Litebox para poder ver todas las fotos seguidas y no de una en una, además de un botón de "download" para cada foto individual.

Sigamos... hasta que no ha cargado todas las miniaturas (repito, dinámico el contenido del album) no funciona el litebox y me gustaría poner un evento de body onload que mostrase una barra o mejor aún, un reloj del estilo de litebox (http://www.doknowevil.net/litebox/) pero lo único que consigo es poner el body como hidden mediante javascript y al terminar mostrarlo y para albumes grandes tarda mucho y da sensación de "colgado". Si a su vez el progreso fuese real (mostrando algo así "Cargando 23/104 fotos"), sería estupendo.

Si alguien me puede ayudar, estaré muy agradecido.

Muchas gracias, un saludo.

GatorV · #2 (**permalink**) 08/05/2008, 09:20

Tema trasladado a JavaScript.

caricatos · #3 (**permalink**) 08/05/2008, 10:17

Hola:

En las FAQs javascript hay un mensaje sobre precarga con barra de progreso. En definitiva hay dos formas: una consultar de cada imagen su atributo complete, y en el momento que se ponga true (indicando que se ha cargado) incrementar el contador..., o hacer que ese dato se genere de forma asincrona, mediante el evento load de las imágenes... <img src="imagen.gif" onload="imagen_cargada(this)" />

Un efecto que me gusta es tapar la imagen con una capa y un gif tipo reloj, y ocultar esa capa al cargarse la ídem.

Saludos

josemari11 · #4 (**permalink**) 08/05/2008, 12:32

Buenas tardes,

en primer lugar gracias por las respuestas. Me he pasado la tarde intentando hacerlo por mi mismo buscando por internet y demás.

Os cuento. Lo que quiero es que mientras se cargan las miniaturas del album aparezca este gif

y que mientras dure el proceso de carga se atenue el fondo (poniendo debajo de este icono algún color grisaceo semitransparente), se bloquee el uso del ratón y las barras de desplazamiento y una vez cargado desaparezcan todos estos cambios.

El código que tengo hasta el momento es este:
Función Javascript para el evento ONLOAD del BODY

Código:

<script language="javascript">
<!--
function precargar() {
imgs = document.images;
precargadas = true;
for (var i = 0, total = imgs.length; i < total; i ++)
precargadas = (precargadas && imgs[i].complete);
if (precargadas){
	document.body.style.visibility = "visible";
	document.body.style.overflow = "";
	document.getElementById("cargando").style.display='none';
}
else setTimeout("precargar()", 100);
}
//-->
</script>

Código HTML:

<body style="overflow:hidden" onLoad="precargar()" oncontextmenu="return false" bgcolor="#ff9900" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
	<div id="cargando" style="position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;">
		<img align="center" src="images/cargando.gif" border="0">
	</div>

Me falta bloquear el uso del ratón y establecer la atenuación del color de fondo.

Muchas gracias por vuestra ayuda. Un saludo.