Javascript 图像预加载，我做错了什么

Question

我正在使用 document.images 在访问者首次访问该网站时加载图像。原因是因为我有几个不同的区域有翻转图像。在我切换到使用 CSS sprites(修改大量工作)之前，我要在这里问一下。

所以我用这个预加载图像:

images = new Array();

if (document.images) {
    images.push(preloadImage("http://website.com/images/myimg.png", 300, 200));
}

function preloadImage(src, x, y) {
    var img = new Image(x, y);
    img.src = src;
    return img;
}

根据 Chrome 的“资源”面板，这工作得很好。即使在按下 CTRL+F5 后，也会下载 JS 中列出的图像。

但是，它们未被使用。如果我将鼠标悬停在我的三个脚本中的一个元素上，图像将被第二次下载。德普？

我假设以这种方式预加载图像时，您应该使用该图像数组。我以为浏览器会足够聪明地说“嘿，这是同一张图片，让我们使用它两次”，但显然不是。

那么这是正确的吗？我是否需要重写我的程序来单独预加载图像？我知道这听起来并不难，但它确实不是为此而设计的。

Answer 1

这并不是您问题的真正答案，但我提出了一个不同的解决方案。将所有需要预加载的图像放在对用户隐藏的 div 中。我知道，我知道，这不是那么优雅，但它应该可以正常工作。 :)

<div style="display: none;">
    <img src="http://website.com/images/myimg.png" alt=""/>
    ...
</div>