Evento de JavaScript para cuando se cambia el atributo 'src' de la imagen '

Question

Tengo una función resizePreview() que redimensionará una imagen en un cuadro de diálogo jQuery si la imagen es demasiado grande. Esta imagen puede ser cambiada por el usuario. Mi código es algo como esto:

$('#imagePreview').attr('src', newImageSrc); 
resizePreview(); 

resizePreview() utiliza $('#imagePreview').width() y .height() para obtener las dimensiones y cambia el tamaño en consecuencia. El problema es que la nueva imagen no se carga cuando se llama al resizePreview(), por lo que la imagen cambia de tamaño de acuerdo con sus dimensiones originales, no de acuerdo con las dimensiones de la imagen recién cargada.

Si puse una llamada alert() entre las dos líneas de código, funciona (ya que la alerta le da al navegador suficiente tiempo para cargar la nueva imagen). Aparentemente debería usar un evento? ¿Hay un evento existente, o hay una forma en que puedo hacer uno, para cuando el src de la imagen haya cambiado (algo así como un evento onChange, pero para ese atributo) o para cuando la nueva imagen haya terminado de cargarse? Gracias por tu tiempo.

Answer 1

El evento load trabaja para Imágenes:

$('img.userIcon').on('load', function() { 
    $(this).toggleClass('bigImg', $(this).height() > 100); 
}); 

Answer 2

objetos de imagen permiten la conexión de detectores de eventos onload:

var img = new Image; 
img.onload = function() { 
    alert("Loaded"); 
}; 
img.src = "dummy-picture.png";