JavaScript 图像对象 - 处理 onload 事件

Question

我正在尝试在单击事件中预加载图像:

// new image object
var imgObject = new Image();

// assign the path to the image to the src property
imgObject.src = document.URL + 'image/image.jpg';

// check if image has loaded
if (imgObject.complete) {

但是完整的调用在第一次点击时永远不会返回true - 你知道我在这里缺少什么吗？

- user398341

Answer 1

.complete 是图片对象的属性，而不是您可以附加到的事件。使用 onload 事件：

var image = new Image();
image.onload = function() {
    alert('image loaded');
};
image.src = document.URL + 'image/image.jpg';

注意：在设置源属性之前，请确保附加到onload处理程序。

注意解释：图片缓存。如果图片被缓存，则onload事件将立即触发（有时会在设置处理程序之前触发）。

- James Hill

---

好的 - 我不能真正地做到这一点，它必须是在点击时 - 并且它打开从<a>标签的href属性中获取的URL - 除非我显然误解了你的建议。 - user398341

在设置src属性之前调用它的重要性是什么？ - user398341

谢谢詹姆斯 - 现在似乎可以工作了。我只是想知道为什么 .complete 调用没有起作用。 - user398341

@user398341，.complete是一个属性，用于说明图像是否已加载，而不是您可以附加到的事件。您的if语句在设置图像src后立即运行 - 在那个时候它可能永远不会成立（除非它被缓存了？）。我稍微更新了答案，以使其更清晰一些。 - James Hill