2

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

    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），并且想知道是否有一种方法可以在不单独声明每个图像的情况下这样做。

任何建议将不胜感激！

4

2 回答 2

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，因为这实际上是个好主意；）

于 2011-03-02T06:59:37.103 回答
0

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

于 2011-03-02T06:44:17.577 回答