5

私のページには、この配列からさまざまなソースが供給される単一の img タグがあります。

    preload_image_object = new Image();
    var images = new Array();
    images[0] = "images/01.jpg";
    images[1] = "images/02.jpg";
    images[2] = "images/03.jpg";
    images[3] = "images/04.jpg";
    images[4] = "images/05.jpg";

    //Preload images for faster page response
    for (var i=0; i < images.length; i++) {
        preload_image_object.src = images[i];
    };

一度に 1 つの画像しか表示しませんが、画像が非常に大きいことがわかります (それぞれ数メガ)。次の画像に移動したときに表示されるように、これらを最初にロードする必要があります。現在、私がこれを開発している iPad でわずかな遅延があります。

これらの画像をプリロードする最良の方法は何ですか?

ありがとう！

4

3 に答える 3

3

純粋なCSS画像のプリロードを試すことができます。

body:after {
  content: url("images/01.jpg") url("images/02.jpg");
  display: none;
}
于 2012-10-19T18:42:53.257 に答える
0

画像をプリロードするどの形式でも、あなたのものと jfriend00 のものと同じ方法を使用します。jquery を使っても同じことができます。

ループを最適化 (配列の長さなどをキャッチ) することはできますが、わずかな節約になります。

画像自体を最適化すると、より目立つようになります

CSS スプライトはオプションですか?

于 2012-10-19T18:30:41.370 に答える
-2

これを使って。わからないことがあれば聞いてください。

jQuery(document).ready(function () {           
    preload([
        'path to img 1',
        'path to img 2',
        .... array of all images

    ]);

    function preload(images) {
        if (typeof document.body == "undefined") return;
        try {    
            var div = document.createElement("div");
            var s = div.style;
            s.position = "absolute";
            s.top = s.left = 0;
            s.visibility = "hidden";
            document.body.appendChild(div);
            div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
            var lastImg = div.lastChild;
            lastImg.onload = function () {
                document.body.removeChild(document.body.lastChild);
            };
        }
        catch (e) {
            // Error. Do nothing.
        }
    }
});
于 2012-10-19T18:30:26.423 に答える