javascript - 为什么在使用 document.getElementByID 更新图像之前显示我的 JavaScript 警报消息？

Question

在我的 JavaScript 代码中，我首先调用一个函数来更新图像:

document.getElementByID("i1").src = newImage;

然后在几条语句之后调用 alert() 函数来显示一条消息:

alert("image updated!");

但是，当我运行此代码时，实际发生的是在图像更新之前弹出警告框。当我单击对话框中的“确定”按钮以关闭警报框时，图像会更新。

为什么这些事件的顺序没有被保留？在显示警报对话框之前，我可以调用某种同步函数来等待图像更新完成吗？

我愿意以某种方式重构代码(即，使用除 alert() 函数之外的东西)，但我更喜欢允许现有代码按预期工作的解决方案。

Answer 1

图像加载是异步的。您需要的是加载图像时的回调。

如果你使用 jQuery，你可以这样做:

var img = $('#i1');
img.load(function() {
    alert('image updated!');
});
img.src = newImage;

如果你使用 Prototype，你可以这样做:

var img = $('i1');
Event.observe(img, 'load', function(e) {
    alert('image updated!');
});
img.src = newImage;

请注意，在任何一种情况下，首先定义回调，然后设置图像 src 都很重要。