Événement JavaScript pour quand l'attribut 'src' de l'image est changé?

Question

J'ai une fonction resizePreview() qui va redimensionner une image dans une boîte de dialogue jQuery si l'image est trop grande. Cette image peut être modifiée par l'utilisateur. Mon code ressemble à ceci:

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

resizePreview() utilise $('#imagePreview').width() et .height() pour obtenir les dimensions et redimensionne en conséquence. Le problème est que la nouvelle image n'est pas chargée au moment où resizePreview() est appelée, de sorte que l'image est redimensionnée en fonction de ses dimensions d'origine, et non en fonction des dimensions de l'image nouvellement chargée.

Si je mets un alert() appel entre les deux lignes de code cela fonctionne (puisque l'alerte donne au navigateur suffisamment de temps pour charger la nouvelle image). Apparemment, je devrais utiliser un événement? Existe-t-il un événement existant ou existe-t-il un moyen de le faire lorsque l'image src a changé (un peu comme un événement onChange, mais pour cet attribut) ou lorsque la nouvelle image a été chargée? Merci pour votre temps.

Answer 1

L'événement load fonctionne qu'avec des images:

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

Answer 2

objets de l'image permettent la fixation des écouteurs d'événements onload:

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