0

私はウェブサイトの画像を処理するための最良の方法（ユーザーが要素をクリックすると画像を循環して表示する）を読んでいますが、プリローダーが有利なようです。

プリローダーを取り出すことができ、現在のセットアップでは、配列からとにかく画像1をdivに挿入するだけで、プリローダーは最初にすべての潜在的なHTMLリクエストを含めることで機能するため、後で潜在的な読み込み時間を短縮できますか、これは役に立たない実装ですか？それが書かれているように？

私は実際にから画像を撮るべきimageObjです.append(...)か？

-注-私は実際にはimage1の呼び出しをそのまま許可しているだけであることを認識していますが、これは単なる実践です。

HTML

<body>
    <a href='#' id="image1">
    Click for image 1
    </a>
    <hr/>
    <a href='#' id="image2">
    Click for image 2
    </a>
    <hr/>
    <a href='#' id="image3">
    Click for image 3
    </a>
    <hr/>
    <a href='#' id="image4">
    Click for image 4
    </a>
    <div id="image">
    </div>
</body>

JavaScript / jQuery

// JavaScript Document

function preloader() 
{
    var i = 0;

    imageObj = new Image();

    images = new Array();
    images[0]="images/image1.jpg"
    images[1]="images/image2.jpg"
    images[2]="images/image3.jpg"
    images[3]="images/image4.jpg"

    for(i=0; i<=3; i++) 
    {
        imageObj.src=images[i];
    }
}

$(document).ready(function(){

    preloader();

    $('#image1').click(function(){
        alert("Handler for #image1 .click() called.");
        $('#image').append('<img id="theImg" src=' + images[0] + ' />');
    });

});
4

1 に答える 1

0

このコードの効果は、可能な各画像に「タッチ」するだけなので、画像がキャッシュに読み込まれますが、それが理にかなっている場合はDOMには読み込まれません。

.append（...）のimageObjから実際に画像を取得する必要がありますか？

いいえ、その部分は、getに画像をブラウザのキャッシュにプリロードさせることだけです。ループ内でほぼすぐに上書きされることに注意してください。

猛烈な読み込み速度が必要な場合は、画像を複数のサブドメインまたはCDNから取得することも検討してください。

于 2012-06-12T14:06:19.850 に答える