Ver Mensaje Individual
  #4 (permalink)  
Antiguo 04/04/2011, 09:18
webyg
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: addEventListener para onload de imagen

Cita:
Iniciado por Panino5001 Ver Mensaje
Hay varias consideraciones y es un tema escabroso.
Eso seguro. Enrevesado más bien :S
Cita:
Iniciado por Panino5001 Ver Mensaje
Esto, por ejemplo, está mal:
Código PHP:
document.getElementById('xxx').addEventListener('load',iloaded('valor'),false); 
Porque el segundo argumento de addEventListener espera una referencia a una función y no una invocación a una función. Es decir, hay que colocar sólo el nombre de la función si es que esta no requiere argumentos y ya está definida o envolverla en una función anónima en cualquier otro caso:
Código PHP:
document.getElementById('xxx').addEventListener('load',function(){iloaded('valor');},false); 
Vale, el problema es que los navegadores lo aceptan (Opera y Firefox).

De todas formas, el envolverla... ¿no podría ser con una variable? Es que las capturas de eventos tendría que hacerlas con un while (porque lo mismo tengo 4 para crear, que 30 y no es cuestión de ponerlas una a una), entonces las creo así y, según tus indicaciones, ¿sería esto correcto? (si es que se admiten variables como segundo argumento, claro):

Código:
function crear_capturas_de_eventos(){

z = 1;
cuoc = 0;

var otrafuncion = iloaded(vararray[[z]]);
		
	while(z < unvalor+1){
		var imgtest[z]= document.getElementById(otroarray[z]).addEventListener('load',otrafuncion,false);
		cuoc++;
		}
		if(z > unvalor){
		break;
		}
		z++;
	}

}
Esta es una adaptación rápida de un while que tengo por ahí, no tengas en cuenta errores evidentes, es para que te hagas una idea de cómo crearía las capturas de eventos y para saber si sería posible meter la variable otrafuncion como segundo argumento, para así poderle pasar a la función iloaded los argumentos necesarios desde el array de ejemplo que pongo aquí vararray.

Si te fijas, si hago lo que tú dices de llamar a una función que envuelva la función iloaded, no podría pasarle valores distintos. Digo esto porque "z" la reseteo unas cuantas veces a lo largo de varias funciones del script y, aunque es una variable global se manipula, mayormente, de forma local, con reseteos, como digo. Aunque supongo que sí podría hacerlo, pero mira que es rebuscado :P Crear una función para llamar a otra función es un poco redundante. Opinión de un iletrado de javascript como yo :P

Cita:
Iniciado por Panino5001 Ver Mensaje
Pero además, hay que considerar otras cosas. Por ejemplo, la carga de las imágenes suele suceder antes que la carga de la página, así que para cuando se produce el onload de body o el window.onload, ya se produjo el image.onload y lo más probable es que no se ejecute el manejador asignado a ese evento si lo asigno más tarde.
Mira, eso de que cargan las imágenes antes que la página no lo sabía.

Pero ojo a mi código. Mis imágenes no cargan porque tienen, de inicio, un src="", y, además, hasta que no se carga la función crea_src_imagenes(); en el onload del tag body, no se empiezan a cargar las imágenes que quiero.

Así que ese caso, en principio, no ocurriría, ¿no?

Cita:
Iniciado por Panino5001 Ver Mensaje

Y ahí se presenta un problema, porque para asignar un evento a un elemento este debe estar disponible en el DOM y para eso hay 4 posibilidades:

Dependiendo del caso, puede usarse DOM 1, que funciona siempre y sólo hay que verificar, para que el evento se produzca siempre, que la imagen no esté cacheada:
Código PHP:
<script type="text/javascript">
var 
i=new Image();
i.onload=function(){alert('listo');}
i.src='img2/5.jpg';//o, para evitar caché: i.src='img2/5.jpg?'+new Date().getTime();
</script> 
El problema aquí es que el evento onload no está permitido para el elemento img, y es por esto que estoy buscando usar el addEventListener. Se ha vuelto casi un reto :D

Cita:
Iniciado por Panino5001 Ver Mensaje
O usar temporizadores para asignar los eventos:
[...]
O temporizadores para verificar la propiedad complete de las imágenes cuya carga necesitemos controlar:
[url]http://www.forosdelweb.com/3342764-post13.html[/url]
En cuanto a cómo funcionan los eventos del DOM, considerando que en explorer funcionan también de manera diferente, te recomiendo esta lectura:
[url]http://kusor.net/traducciones/brainjar.es/events1.es.html[/url]
Uy, temporizadores. Ese talón de aquiles. Ahí sí que no me meto. Usando Timeouts soy un jodido desastre. Nunca me funcionan. Hace un tiempo los intenté usar para crear un delay para un onmouseout y que se ocultara un div y no sé si es que no sabía usar el clearTimeout o qué, pero no había manera de parar el timeout :_(

De todas formas, en ese código que me has puesto, usas attachEvent y addEvent... igual es porque ya tengo la cabeza echa un lío, pero, ¿eso no era para IE sólo?

Gracias por los links, pero yo creo que cuanto más leo más me lío, por eso venía a preguntar. Intentaré echarles un ojo, a ver si entiendo algo.



Cita:
Iniciado por zerokilled Ver Mensaje
buenas...

el tercer argumento de addEventListener controla en que etapa de la propagacion el listener debe capturar el objeto event generado por el evento. hay tres etapas: CAPTURE, TARGET y BUBBLE. CAPTURE, basicamente es cuando el objeto event recorre el camino desde el contexto mas alto en la jerarquia de elementos -usualmente DOM Window- hasta el elemento que producio el evento; TARGET es el elemento en si que producio el evento; y BUBBLE es el reverso de CAPTURE[...]

Vale, a ver, pero false es capture y true es bubble, ¿no? Lo que no entiendo es por qué tiene que recorrer todos los elementos si tú ya le tienes indicado uno con getElementById :-? Así que mi pregunta es, ¿es necesario entonces el true y el false?