Question

目前我正在使用一个非常基本的功能来预加载图像：

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
    }

    // Usage:

    preload([
        'img/imageName.jpg',
        'img/anotherOne.jpg',
        'img/blahblahblah.jpg'
]);

我需要预加载相当多的小图像（合并时远远低于1MB），并且想知道是否有办法在不单独声明每个图像的情况下这样做。

非常感谢任何建议！

Answer 1

您可以使用像supplyJS这样的加载程序脚本。这在加载大量“小”图像时非常有用，因为它的速度要快得多。

演示：http://www.typeofnan.com/lab/mxhr-stream/

加载看起来像：

supply.listen('image/jpg', function(payload, filename) {
    jQuery('<img>', {
        src: 'data:image/jpeg;base64,' + payload
    }).appendTo(document.body);;
});

supply.setDealer('/cgi-bin/supply.pl').files({
    images: [
        '/images/foo.jpg',
        '/images/bar.jpg',
        '/images/another.jpg'
    ]
});

此示例将直接将新加载的图像附加到document.body。当然，你可以对mime-type-listener中的那些做任何事情。不可否认，这也需要明确指定每个图像，但它应该更快。

^{..顺便说一句，也许supplyJS的作者会添加一个 *。jpg ，因为这实际上是一个好主意;）}

Answer 2

不是你的问题的直接答案，但我的建议是考虑使用CSS精灵，将它们全部放在一个图像中并控制使用CSS显示的内容。

使用JQuery预加载图像 - 从文件夹加载图像？

2 个答案: