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'
]);

プリロードする必要がある小さな画像がかなり多数あり (すべて組み合わせると 1 MB 未満)、各画像を個別に宣言せずにそうする方法があるかどうか疑問に思っていました。

どんなアドバイスでも大歓迎です！

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 スプライトの使用を検討することをお勧めします。つまり、すべてを 1 つの画像に配置し、CSS を使用して表示されるものを制御します。

于 2011-03-02T06:44:17.577 に答える