Efecto "En agua" no arranca.

furoya · #1 (**permalink**) 10/10/2005, 12:43

Hice un efecto JS que simula una imagen vista a través del agua en movimiento. Creí que andaba bien hasta que lo probé con otra imagen y/o en otra máquina.

Descubrí que el efecto no empezaba hasta que recargaba la página. Y después podía hasta cerrar la sesión, que ya no volvía a aparecer el problema.

Como dije antes, si cambiaba la imagen ¡se clavaba de nuevo!. Un F5 y como si no hubiera pasado nada.

Le puse un escript que hacía una recarga al abrir; pero llegar a éso es una vergüenza.

No pude encontrar dónde está el error. Quizá es tan evidente que por eso no lo veo (me pasa mucho). Si alguien quiere echarle una mirada, aquí dejo el código.

Código:

<html>
<head>
<title>IMAGEN CON OLAS.</title>
<style>
body{background:#000080; color:#FFFFFF}
#contenedor{position:relative} 
#imag0, #imag1{position:absolute; top:0px; left:0px; margin-left:50px; margin-top:0px}
a:link {color: #FF99FF}
a:visited {color: #99FF99}
a:hover {color: #FF9999}
a:active {color: #9999FF}
 
</style>

<script language= "JavaScript">

var ruta = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "; //de la imagen
var velocidad = 250; //de la ola en ms

var alto, ancho, velocidad, mod, arr, der, abj, izq, lado, desplaza;
var imagen = new Image();
imagen.src = ruta;
var imagenes = "";

function olas0(){
alto = imagen.height;
ancho = imagen.width;

if(alto>ancho)mod = (ancho/4);
else mod = (alto/4);

imagenes += "<img src=\""+imagen.src+"\" id=\"imag0\">"
imagenes += "<img src=\""+imagen.src+"\" id=\"imag1\">"

document.getElementById("contenedor").innerHTML = imagenes;
document.getElementById("contenedor").style.height = alto+"px";

setTimeout("olas1()" , 1000);
olas3();
}

function olas1(){
lado = Math.floor(Math.random() * (mod*3)) + Math.floor(mod/3);
arr = Math.floor(Math.random() * (alto-lado));
izq = Math.floor(Math.random() * (ancho-lado));
abj = arr + lado;
der = izq + lado;
despIzq = parseInt(document.getElementById( "imag0" ).style.left);

if(desplaza){
document.getElementById( "imag1" ).style.top = "0px";
document.getElementById( "imag1" ).style.left = "1px";
}
else{
document.getElementById( "imag1" ).style.top = "1px";
document.getElementById( "imag1" ).style.left = "0px";
}

document.getElementById( "imag1" ).style.clip = "rect("+arr+" "+der+" "+abj+" "+izq+")";

olas2();
}

function olas2(){
setTimeout("olas1()", velocidad);
}

function olas3(){
if(desplaza) desplaza = false;
else desplaza = true;

setTimeout("olas3()", 2000);
}
</script>

</HEAD>
<BODY onload="olas0()">
<h2>Imagen con efecto de ondas "en agua".</h2>

<div id="contenedor"></div>
<br />
Ver también <a href="Imagen en agua1.htm">Imagen en agua1.htm</a>.

</body>
</html>

Solamente pido (¡ruego!) que quien se decida a probarlo lea 2 veces las cicunstancias en las que falla. No quiero que me digan "-Anda perfectamente." después de que (p.e.) le hicieron un refresh.

Está probado en IE ,FF y Op; aunque seguramente en modo "compatible", ya que Mozilla tiene su propia versión de clip y no sé cómo es que interpreta la de Microsoft.

Gracias

furoya

programeitor · #2 (**permalink**) 10/10/2005, 13:11

Hola furoya, no entiendo bien esto:

Cita:

Iniciado por furoya

Descubrí que el efecto no empezaba hasta que recargaba la página. Y después podía hasta cerrar la sesión, que ya no volvía a aparecer el problema.

Como dije antes, si cambiaba la imagen ¡se clavaba de nuevo!. Un F5 y como si no hubiera pasado nada.

¿Quieres decir que el efecto en la imagen, no se muestra al cargar la pagina, sino, al recargarla?

he probado la pagina en IE y Firefox y estas son mis impresiones:

la imagen muestra el efecto unos segundos
se detiene unos segundos
vuelve a mostrar el efecto
vuelve a detenerse
....
....

Yo creo que es porque tienes 3 setTimeout, uno con 250 milisegundos ,otro con 2 segundos y otro con 3.

¿Pueden ser esos 2 y 3 segundos, la causa?

furoya · #3 (**permalink**) 11/10/2005, 14:27

Hola programeitor :

Cita:

¿Quieres decir que el efecto en la imagen, no se muestra al cargar la pagina, sino, al recargarla?

Exactamente.

Cita:

la imagen muestra el efecto unos segundos
se detiene unos segundos
vuelve a mostrar el efecto
vuelve a detenerse

Eso es mas o menos lo que hace. Pero no debería detenerse mucho, de eso depende que el efecto (de por sí forzado) sea más creíble.
Si se detiene mucho es probable que no haya mucha memoria disponible en tu máquina. Aunque el efecto no consume demasiado.

Cita:

Yo creo que es porque tienes 3 setTimeout, uno con 250 milisegundos ,otro con 2 segundos y otro con 3.

¿Pueden ser esos 2 y 3 segundos, la causa?

No. Porque ocurriría siempre, y no sólo al entrar.

Se me ocurrió probar el código de nuevo y me extrañó que FF lo mostrara de una. Ahora estoy creyendo que tiene algo que ver con la precarga en caché.

Ya había entrado al foro con Firefox y la imagen seguramente estaba cacheada. Cuando lo hice con IE falló como siempre. Voy a estudiar ésto - si nadie tiene una sugerencia mejor-.

Muchas gracias por probar.

programeitor · #4 (**permalink**) 11/10/2005, 15:35

Bueno yo te lo decia porque al reducir esos 2 y 3 segundos a 100 milisegundos por ejemplo, no se aprecian esas pausas en IE y en Firefox, que lo he probado.

furoya · #5 (**permalink**) 18/10/2005, 11:10

No entiendo bien por qué, pero si cargo la imagen en el documento el efecto arranca. (¿Estaré haciendo mal la precarga?).

Hice varias pruebas con diferentes imágenes y anduvo. A veces uno se ahoga en una gota de agua. De todas formas, de no haber posteado el tema, seguro no hubiese notado lo del caché.

En fin. Para los que se molestaron en probarlo, y pensaron -"Este furoya está cada día peor" porque ya tenían cacheado el logo de los foros y les anduvo; les dejo otra versión. Que supongo ya corregida.

Código:

<html>
<head>
<title>IMAGEN CON OLAS.</title>
<style>
body{background:#000080; color:#FFFFFF}
#contenedor{position:relative; visibility:hidden} 
 </style>

<script language= "JavaScript">

var ruta = "http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif "; //de la imagen
var arriba = 0; //top
var izquierda = 50; //left
var velocidad = 60; //de la onda en ms

var alto, ancho;
var imagen;
var imagenes = "";
var estilos = "";
var capa1a = 0;
var capa2a = -5;
var capa3a = -10;
var capa4a = -15;
var capa5a = -20;
var capa1i = -50;
var capa2i = -45;
var capa3i = -40;
var capa4i = -35;
var capa5i = -30;
var onda = [(arriba),(arriba+1),(arriba+2),(arriba+3),(arriba+2),(arriba+1)];
var despl = 2;

function olas0(){
imagen = new Image();
imagen.src = ruta;
alto = imagen.height;
ancho = imagen.width;
for(i=0;i<6;i++){
imagenes+="<img src=\""+imagen.src+"\" id=\"imag"+i+"\">";
}
document.getElementById("contenedor").innerHTML = imagenes;
document.getElementById("contenedor").style.height = alto+"px";

setTimeout("olas1(); document.getElementById('contenedor').style.visibility = 'visible';" , 1000);
}

function olas1(){
document.getElementById("imag1").style.clip="rect(0 "+capa1a+" "+(alto-1)+" "+capa1i+")";
document.getElementById("imag2").style.clip="rect(0 "+capa2a+" "+(alto-2)+" "+capa2i+")";
document.getElementById("imag3").style.clip="rect(0 "+capa3a+" "+(alto-3)+" "+capa3i+")";
document.getElementById("imag4").style.clip="rect(0 "+capa4a+" "+(alto-2)+" "+capa4i+")";
document.getElementById("imag5").style.clip="rect(0 "+capa5a+" "+(alto-1)+" "+capa5i+")";

olas2();
}

function olas2(){
if(capa1i>ancho) despl = -2;
else if(capa1a<0) despl = 2;

capa1i += despl;
capa2i += despl;
capa3i += despl;
capa4i += despl;
capa5i += despl;
capa1a += despl;
capa2a += despl;
capa3a += despl;
capa4a += despl;
capa5a += despl;

setTimeout("olas1()", velocidad);
}

</script>

</head>
<body onload="setTimeout('olas0()',2000)">
<h2>Imagen con efecto de ondas "va-y-ven".</h2>
<script>
for(s=0;s<6;s++){
estilos += "#imag"+s+"{position:absolute; top:"+onda[s]+"px; left:"+izquierda+"px}";
};
document.write("<style>");
document.write(estilos);
document.write("</style>");
</script>
<div id="contenedor"><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif " /></div>
<br />

</body>
</html>

programeitor · #6 (**permalink**) 18/10/2005, 15:46

Tira bien, esta bastante bien el efecto. Aqui está la prueba ,que no hay mas que proponerse algo, para conseguirlo, enhorabuena.

¿Pero, por que tarda tanto en salir la imagen al cargar, a mi me tarda unos 4'' en aparecer?