Evento JavaScript per quando l'attributo dell'immagine 'src' è cambiato?

Question

Ho una funzione resizePreview() che ridimensionerà un'immagine in una finestra di dialogo jQuery se l'immagine è troppo grande. Questa immagine può essere modificata dall'utente. Il mio codice più o meno così:

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

resizePreview() utilizza $('#imagePreview').width() e .height() per ottenere le dimensioni e ridimensiona di conseguenza. Il problema è che la nuova immagine non viene caricata dal momento in cui viene chiamato resizePreview() in modo che l'immagine venga ridimensionata in base alle dimensioni originali, non in base alle dimensioni dell'immagine appena caricata.

Se inserisco una chiamata da alert() tra le due righe di codice funziona (poiché l'avviso fornisce al browser il tempo necessario per caricare la nuova immagine). A quanto pare dovrei usare un evento? Esiste un evento esistente o esiste un modo per crearne uno, per quando l'immagine src è cambiata (un po 'come un evento onChange, ma per quell'attributo) o per quando la nuova immagine ha completato il caricamento? Grazie per il tuo tempo.

Answer 1

L'evento load funziona per le immagini:

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

Answer 2

oggetti Image consentono l'attaccamento degli ascoltatori di eventi onload:

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