mostrar mientras

dieguicho · #1 (**permalink**) 02/07/2003, 20:09

muchach@s..
como puedo mostrar una imagen mientras esta cargando la que debe ir?
hice humildemente este script
<script language="JavaScript">
function foto(id){
document.mostrar.src = 'http://127.0.0.1/fotos/' + id +'.jpg';
}
</script>

paso la variable asi javascript:foto('perrito')

me gustaria que mientras se esta cargando la foto que pedi, se muestre una que ya tengo cargada.. algo como cargando.....
o algo asi.. probe con "do" pero no me funciono...
me entienden?

bueno muchas gracias perdon por preguntar tanto al foro...

caricatos · #2 (**permalink**) 03/07/2003, 02:18

Hola dieguicho:

Voy a decirte como pienso que debes hacerlo:

Cuando cargas una imagen, usando el atributo src del "objeto" Image, hay otra atributo que mientras está cargando es falso, y cierto al completarse (true/false), el atributo "complete"...

Entonces, después de usar el valor src, te diría que llamaras a una función de chequeo del atributo complete cada cierto tiempo:

<script language="JavaScript">
function foto(id){
document.mostrar.src = 'http://127.0.0.1/fotos/' + id +'.jpg';
cargando(id);
}

function cargando(foto) {
if (document.mostrar.complete) {
// completada la carga
}
else {
// aún no se cargó
var nuevamente = 'cargando("' + foto + '")';
setTimeout(nuevamente, 100);
}
}
</script>

Donde están los comentarios deberías poner lo que quieras que pase mientras se cargue la página.

Espero que te sirva.

Saludos

dieguicho · #3 (**permalink**) 03/07/2003, 08:21

mira...

<script language="JavaScript">
function foto(id){
document.mostrar.src = 'http://127.0.0.1/fotos/' + id +'.jpg';
cargando(id);
}

function cargando(foto) {
if (document.mostrar.complete) {
// completada la carga
document.mostrar.src = 'http://127.0.0.1/fotos/' + foto +'.jpg';
}
else {
// aún no se cargó
document.mostrar.src = 'http://127.0.0.1/img/logo.gif';
var nuevamente = 'cargando("' + foto + '")';
setTimeout(nuevamente, 100);
}
}
</script>

<img name="mostrar">
<BR>
<a href="Javascript:foto(2893)">foto1</a>
<br>
<a href="Javascript:foto(2884)">foto2</a>
<br>
<a href="Javascript:foto(2895)">foto3</a>

funciona bien... a la primera osea toco foto1.. y si me muestra el "cargando.." pero al tocar foto2 ya no me muestra el cargando sino que deja la imagen que se cargo previamente hasta que la 2 este cargada y ahi si la muestra.. no deberia pasar eso segun el codigo no?

caricatos · #4 (**permalink**) 03/07/2003, 10:33

Hola otra vez:

Creo que lo que pasa es que la etiqueta img está "complete"...
Voy a improvisar usando una imagen nueva, y dime como va...

dieguicho · #5 (**permalink**) 03/07/2003, 12:08

nop no me funciona me da error :(

caricatos · #6 (**permalink**) 04/07/2003, 09:39

Hola otra vez:

Estuve tratando el tema, y te voy a pasar la página que funciona:

Código PHP:

  <html> 
<head> 
<title> 
    Mostrar mientras 
</title> 
<script language=javascript> 
var base = "http://www.sucaricatura.com/2002/maxi/2002H0"; 
 
var LaFoto; 
 
function foto(n){ 
    LaFoto = new Image(); 
    LaFoto.src = base + n + ".jpg"; 
    document.images.mostrar.src = "miemoticon.gif"; 
    cargando(); 
} 
 
function cargando() { 
if (LaFoto.complete) 
// completada la carga 
    document.images.mostrar.src = LaFoto.src; 
else  
// aún no se cargó 
    setTimeout("cargando()", 100); 
} 
</script> 
</head> 
 
<body > 
<center> 
<h1 id=precarga> 
    Mostrar mientras 
</h1> 
<p> 
<a href="Javascript:foto('35')">foto1</a> 
<br> 
<a href="Javascript:foto('36')">foto2</a> 
<br> 
<a href="Javascript:foto('37')">foto3</a> 
</p> 
<img name="mostrar" id="mostrar" border=2 src="miemoticon.gif"> 
</center> 
</body> 
</html>

Para que funcionara en opera puse algo así:

<a href="#" onclick="foto('00')">foto 1</a>

Espero que te sirva.

Saludos

dieguicho · #7 (**permalink**) 04/07/2003, 12:36

un chiche precioso y hace exactamente lo que queria.
muchisisimas gracias caricatos

caricatos · #8 (**permalink**) 04/07/2003, 19:49

De nada...

Saludos