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中列出的图像。

然而，他们没有被使用。如果我将鼠标悬停在我的三个脚本之一的元素上，则图像第二次下载。 DERP？

我假设在以这种方式预加载图像时，你应该使用该图像数组。我认为浏览器足够聪明，可以说“嘿，这是相同的图像，让我们使用它两次”，但显然不是。

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

Answer 1

这不是你问题的真正答案，但我提出了一个不同的解决方案。将您需要的所有图像预加载到对用户隐藏的div中。我知道，我知道，这不是那么优雅，但它应该工作得很好。：）

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

Answer 2

这对我来说很好用：

    function imgPreload() {
        var imageList = [
            "my/firstimage.png",
            "my/secondimage.jpg",
            "my/thirdimage.png"
        ];
        for (var i = 0; i < imageList.length; i++ ) {
            var imageObject = new Image();
            imageObject.src = imageList[i];
        }
    }

    imgPreload();

干杯。弗兰克

Javascript图像预加载，我做错了

2 个答案: