使用JQuery預加載圖像-從文件夾加載圖像？

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 Sprite，即將它們全部放在一個圖像中並控制使用CSS顯示的內容。