Событие JavaScript, когда атрибут 'src' изменен?

У меня есть функция resizePreview(), которая изменит размер изображения в диалоговом окне jQuery, если изображение слишком велико. Это изображение может быть изменено пользователем. Мой код выглядит примерно так:

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

resizePreview() использует $('#imagePreview').width() и .height() для получения размеров и размеров. Проблема в том, что новое изображение не загружается к моменту resizePreview(), поэтому изображение изменяется в соответствии с его оригинальными размерами, а не в соответствии с размерами загруженного изображения.

Если я помещаю вызов alert() между двумя строками кода, он работает (поскольку предупреждение дает браузеру достаточно времени для загрузки нового изображения). Видимо, я должен использовать событие? Есть ли существующее событие или есть способ, которым я могу его создать, когда изменилось изображение src (вроде события onChange, но для этого атрибута) или для того, когда новое изображение завершило загрузку? Спасибо за ваше время.

Ответ 1

Событие load работает для изображений:

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

Ответ 2

Объекты изображения позволяют подключать прослушиватели событий onload:

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