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