2

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

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

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

alert("image updated!");

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

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

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

4

3 回答 3

4

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

如果你使用 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 都很重要。

于 2010-10-26T18:45:23.713 回答
3

简单的。

设置图像的 src 属性会启动图像的加载。但由于加载是异步进行的，因此在加载完成之前会显示警告框。

于 2010-10-26T18:42:40.650 回答
0

警告框会阻止后台图像的更新。浏览器所做的是下载图像（您可以使用 wireshark 或类似的东西看到这一点），但在执行 JavaScript 时浏览器不会更改网页上的任何内容。如果您有计算密集型 javascript 方法，请尝试使用 WebWorkers。

于 2010-10-26T18:44:32.497 回答