javascript - 更改图像'src'属性时的JavaScript事件？

Question

如果图像太大，我有一个函数resizePreview()可以在 jQuery 对话框中调整图像的大小。用户可以更改此图像。我的代码是这样的：

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

resizePreview()使用$('#imagePreview').width()and.height()来获取尺寸并相应地调整大小。问题是新图像在resizePreview()调用时未加载，因此图像根据其原始尺寸调整大小，而不是根据新加载图像的尺寸。

如果我alert()在两行代码之间调用它就可以工作（因为警报给了浏览器足够的时间来加载新图像）。显然我应该使用一个事件？是否存在现有事件，或者有一种方法可以制作一个，用于图像 src 何时更改（有点像 onChange 事件，但针对该属性）或新图像完成加载时？谢谢你的时间。

score 18 · Accepted Answer

该load事件适用于图像：

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

score 5 · Accepted Answer

图像对象允许附加 onload 事件侦听器：

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

2 回答 2