Hola a todos
Necesitaria mostrar la tipica imagen de un circulo rotando cuando se esta cargando una imagen.
Alguna idea
gracias
saludos
30/10/2007, 04:14
| ||||
| ||||
| Re: Mostrar la carga de una imagen 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:
Lo puedes probar en esta página: Probador de scripts <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> Por cierto, creo que la imagen podría ser esta:  Saludos 
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
30/10/2007, 09:14
| ||||
| ||||
| Re: Mostrar la carga de una imagen 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
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
|
12/11/2007, 10:50
| |||
| |||
| Re: Mostrar la carga de una imagen 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). |
|
09/02/2008, 00:30
| ||||
| ||||
| Re: Mostrar la carga de una imagen 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:
Se puede probar en el mismo probador del mensaje anterior.<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>
Saludos
__________________ Por favor: No hagan preguntas de temas de foros en mensajes privados... no las respondo |
