0

jQuery ギャラリー プラグインを含む HTML ページがあります。ギャラリーには 15 枚の画像と 15 枚のサムネイルがあります。現在、ページの読み込みが少し遅いので、ページの読み込み速度を上げたいと考えています。基本的な質問がいくつかあります。

  1. 画像にadisplay:noneが指定されている場合、ドキュメント フローのスペースを占有しないことはわかっていますが、それでもダウンロードされますか?

    そうでない場合は、最初の画像をダウンロードして、残りのページの読み込みが完了したら、他の画像を事前に読み込むことができます。

  2. ページで同じ画像が 2 回指定されている場合、ダウンロードは 1 回ですか、それとも 2 回ですか。

    15 枚の画像をロードしてから 15 枚のサムネイルを読み込む代わりに、大きな画像をサムネイルとしても使用し、プロパティheightとwidthプロパティを指定してそれらを小さくしようと考えました。

    例えば、

    <div id="main-image"><img src='something' alt='something' /></div>

    <div id="thumb-image"><img src='something' alt='something-else' width='50px' height='50px' />

プロセスを高速化するためのその他の指針は非常に役立ちます。前もって感謝します。:)

4

2 に答える 2

1
  1. はい、それらはまだダウンロードされています (実際には一般的なプリロード トリック)
  2. 繰り返される画像は一度だけダウンロードされます。

jQueryプラグインはどこから入手していますか? Google API から jQuery をロードすると、ブラウザは Google 経由でスクリプトをキャッシュできるようになり、これにより、あなたとあなたのユーザーの速度がわずかに向上します。

于 2013-01-18T09:53:09.320 に答える
1

画像はホームページに掲載されていますか？そうでない場合は、最初に画像をプリロードできます。

ここでデモを参照してください http://www.thewindowdr.info次に、ナビゲーション バーのギャラリーをクリックします。

image-preload.js ファイルを作成して貼り付け、画像の場所を入力します。

このコードをヘッダーに追加します

<script type="text/javascript" src="../js/image-preload.js"></script>

このコードを .js ファイルに追加します

function preloader() {
    if (document.images) {
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        var img4 = new Image();
        var img5 = new Image();
        var img6 = new Image();
        var img7 = new Image();
        var img8 = new Image();
        var img9 = new Image();
        var img10 = new Image();
        var img11 = new Image();
        var img12 = new Image();
        var img13 = new Image();
                var img14 = new Image();
                var img15 = new Image();


        img1.src = "../images/#####.jpg";
        img2.src = "../images/#####.jpg";
        img3.src = "../images/#####.jpg";
        img4.src = "../images/#####.jpg";
        img5.src = "../images/#####.jpg";
        img6.src = "../images/#####.jpg";
        img7.src = "../images/#####.jpg";
        img8.src = "../images/#####.jpg";
        img9.src = "../images/#####.jpg";
        img10.src = "../images/#####.jpg";
        img11.src = "../images/#####.jpg";
        img12.src = "../images/#####.jpg";
        img13.src = "../images/#####.jpg";
        img14.src = "../images/#####.jpg";
        img15.src = "../images/#####.jpg";

    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);
于 2013-01-18T16:28:47.610 に答える