javascript, image onload() no se activa en webkit si se carga la misma imagen

Question

Tengo un elemento <img> y estoy cambiando su atributo src. El elemento tiene una función de controlador onload adjunta. Cada vez que cambio el atributo src y la imagen se carga, la función del controlador debe ejecutarse.

En Chrome y Safari, si asigno el mismo src que el anterior, la función del controlador no se ejecuta. Antes de asignar el mismo código que antes, he intentado imgElement.src='', imgElement.src= null, imgElement.src='notExistingFile.jpg' y nada de eso funciona.

Por favor ayuda. ¿Alguien tuvo este problema antes?

Editar: funcionó haciendo imgElement.src = '' antes de asignar la misma src como antes:

imgElement.src = ''; 
imgElement.src = 'image.jpg'; 

Answer 1

Esta es una known bug. Aquí está la solución de ese enlace:

Esto no es un error. WebKit es simplemente más estricto. Usted debe crear una instancia de un nuevo Image() objeto antes de la sustitución, así:

var photo = document.getElementById('image_id'); 
var img = new Image(); 
img.addEventListener('load', myFunction, false); 
img.src = 'http://newimgsource.jpg'; 
photo.src = img.src; 

Answer 2

Creo que su problema aquí es que está asignando el proceso de carga después de cambiar el valor de src, por lo que una vez que la imagen ya se ha cargado en el caché, el navegador lo carga antes de la asignación del evento. Significa que en lugar de hacer esto:

myImageObject.src = "something.png"; 
myImageObject.onload = myCallback; 

hacer esto:

myImageObject.onload = myCallback; 
myImageObject.src = "something.png"; 

Answer 3

Para añadir a la respuesta de Matt Ball, considere img.onload en lugar de img.addEventListener().

var photo = document.getElementById('image_id'); 
var img = new Image(); 
img.onload = myFunction; 
img.src = 'http://newimgsource.jpg'; 
photo.src = img.src; 

img.onload es más fácil de leer y funciona mejor entre los agentes de usuario.