0

私はweb-devを初めて使用するので、これがばかげた質問である場合は申し訳ありません。画像プリローダーについて混乱しています。私は多かれ少なかれ30-40の大きな画像を含むギャラリーを書いています。ギャリーにはいくつかの親指があり、親指をクリックすると大きな親指が表示されます。

今のところ、私のHTMLは次のようになっています。

<script type="text/javascript">
    var gallery_smallsize_urls = [
        "0_small.jpg", "1_small.jpg",
        "2_small.jpg", "3_small.jpg", 
        ...
        ];

    var gallery_fullsize_urls = [
        "0_full.jpg", "1_full.jpg",
        "2_full.jpg", "3_full.jpg",
        ...
        ];
</script>

<div id="gallery_thumbs">
    <ul>
        <li> <img id="gallery_thumb0" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb1" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb2" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb3" src="loading.gif" alt="0"> </li>
        ...
    </ul>
</div>

今、私は私の心の中に2つの機能があります：

  1. 読み込みのキュー。ページが読み込まれます。ドキュメントの準備ができたら、jsは親指のキューを開始します。つまり、1°の親指をロードし、それが終了したときにのみ2°のロードを開始します。等々。

  2. 塗りつぶしサイズの画像のプリロード。ユーザーが親指をクリックすると、フルサイズの画像がすでにメモリにキャッシュされているため、フルサイズが表示されるまでの待ち時間が短くなります。

今、私はこの投票された答えを見つけました：

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

しかし、それはポイント2の答えに過ぎないと思います。ここで何が起こりますか？画像は同時に読み込まれますか？ポイント1へのアプローチ方法がわかりません。Deferredオブジェクトを使用するのが最善の方法だと思います...。

いくつかのアドバイス？

4

1 に答える 1

1

画像プリローダープラグイン（jQuery）を使用できます。

https://github.com/desandro/imagesloaded

これにより、表示する前にサムネイルをプリロードできます（ブラウザがとにかくそれを行うので、これはより効果的です）。

大きな画像に関しては、プラグインを使用してバックグラウンドですべての画像を読み込むことができます。例えば：

var sampleImage= new Image();
sampleImage.src = imageURL;

$(sampleImage).imagesLoaded({
    done: function($images){
              // do something when image is loaded
    });
});
于 2012-11-30T18:27:13.717 に答える