为什么在使用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非常重要。

Answer 2

简单。

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

Answer 3

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