Hay varias consideraciones y es un tema escabroso.
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);
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.
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:
1-ver si se produjo el evento DOMContentLoaded
2-asignar los eventos como atributos del tag img
3-asignar los eventos con scripts escritos justo después de los tags img
4-esperar el window.onload o el body onload
La 4 ya vimos que no sirve.
La 1 funciona sólo en navegadores estandar, pero no en Explorer y los apaños que suelen usarse (document.readyState=='complete', por ejemplo) suelen ocurrir luego de la carga de las imágenes, con lo que terminamos igual que con la opción 4.
Y la 2 y 3 no son muy cómodas ni limpias.
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>
O usar temporizadores para asignar los eventos:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function addEvent(obj,fun,type){
if(obj.addEventListener){
obj.addEventListener(type,fun,false);
}else if(obj.attachEvent){
var f=function(){
fun.call(obj,window.event);
}
obj.attachEvent('on'+type,f);
obj[fun.toString()+type]=f;
}else{
obj['on'+type]=fun;
}
}
(function loadImage(){
if(!document.images[0]){
return setTimeout(loadImage,0);
}
addEvent(document.images[0],function(){alert(['a','b','b'])},'load');
})();
</script>
</head>
<body>
<img src="img2/29.jpg" width="1024" height="768" />
</body>
</html>
O temporizadores para verificar la propiedad complete de las imágenes cuya carga necesitemos controlar:
http://www.forosdelweb.com/3342764-post13.html
En cuanto a cómo funcionan los eventos del DOM, considerando que en explorer funcionan también de manera diferente, te recomiendo esta lectura:
http://kusor.net/traducciones/brainj...vents1.es.html