Mostrar la carga de una imagen

chefnelone · #1 (**permalink**) 30/10/2007, 03:46

Hola a todos

Necesitaria mostrar la tipica imagen de un circulo rotando cuando se esta cargando una imagen.

Alguna idea

gracias
saludos

caricatos · #2 (**permalink**) 30/10/2007, 04:14

Hola:

Se me ocurre que podrías poner una capa superpuesta sobre la imagen con esa imagen centrada, y con el evento onload de la imagen ocultar la capa:

Código:

<html>
<body style="backgrund-color: #eeeeee">
<span style="position: relative; background-color: gray; padding: 0" 
><img src="../fotos/flor.jpg" width="640" height="480" style="pargin: 0" onload="this.nextSibling.style.visibility = 'hidden'"
/><span id="cargando" style="position: absolute; background: white url(../dibujos/indicator.gif) no-repeat center center; top: 0; left: 0; width: 640px; height: 480px" />
</span>
</body>
</html>

Lo puedes probar en esta página: Probador de scripts

Por cierto, creo que la imagen podría ser esta:

Saludos

chefnelone · #3 (**permalink**) 30/10/2007, 07:58

no me funciona , creo que no lo he pillado...

caricatos · #4 (**permalink**) 30/10/2007, 09:14

Hola:

Tal vez el problema es el nextSibling que se corresponde con el siguiente objeto, y si has dejado un espacio en blanco entre la imagen y la capa ya puede fallar (según el navegador que uses... tal vez en vez de this.nextSibling sea mejor que pruebes con el id del objeto...

onload="document.getElementById('cargando').style. visibility = 'hidden'"

Si no te sirve, muestranos el código de Cómo lo has probado.

Saludos

chefnelone · #5 (**permalink**) 12/11/2007, 10:50

gracias caricator
lo he probado y me funciona (aunque no funciona en Safari).
pero tengo muchas fotos y de distintos tamanos.
No se puede hacer lo mismo con alguna funcion que se adapte a cualquier foto
No se puede colocar un evento (algo como MIENTRAS_NO_ ESTA_CARGADA ) a todas las imagenes de la pagina que diga que si la carga de esa foto no esta completa que muestre otra imagen(la imagen de espera).

caricatos · #6 (**permalink**) 09/02/2008, 00:30

Hola:

Hay un problema si no se conoce las medidas de la imagen, ya que si se quieren saber esas dimensiones, debe estar cargadas (y se consultarían sus atributos width y height), pero justamente cuando se cargan es cuando se muestran... o sea que sin esos valores es imposible que funcione, pero si son imágenes fijas, esos valores se conocen (desde el sistema operativo, consultando sus propiedades).

Una variante del efecto para imagenes cambiantes es:

Código:

<html>
<head>
<script>
function tag(id) {return document.getElementById(id);}
function imagen(cual) {
 tag("cargando").style.visibility = "visible";
 tag("foto").src = cual;
}
</script>
</head>
<body style="backgrund-color: #eeeeee">
<div>
<button type="button" onclick="imagen('../fotos/FONDO008.gif')" >foto 1</button>
<button type="button" onclick="imagen('../fotos/CostadelSol.jpg')" >foto 2</button>
<button type="button" onclick="imagen('../fotos/carnaval-almeria.jpg')" >foto 3</button>
<button type="button" onclick="imagen('../fotos/castillo-Almeria.jpg')" >foto 4</button>
</div>
<span style="position: relative; background-color: gray; padding: 0" 
><img src="../fotos/FONDO008.gif" width="480" height="360" style="pargin: 0" id="foto" onload="this.nextSibling.style.visibility = 'hidden'"
/><span id="cargando" style="position: absolute; background: white url(../dibujos/indicator.gif) no-repeat center center; top: 0; left: 0; width: 480px; height: 360px" />
</span>
</body>
</html>

Se puede probar en el mismo probador del mensaje anterior.

Saludos

codigojavascript · #7 (**permalink**) 09/02/2008, 16:31

Aca dejo un ejemplo que realiza esta operación:

http://www.codigojavascript.com/varios/barra-progreso-carga-pagina.php

Saludos

huenupan · #8 (**permalink**) 22/02/2008, 11:57

Gracias por la imagen... andaba buscando algo asi