JavaScript 遅延読み込みの詳細な説明

遅延読み込み

名前の通り、私は怠け者なので、すべてのコンテンツをロードしたくありません。ユーザーが後でロードしているものを見たいと思ったとき、

概要: 遅延読み込みは実際には読み込みを遅らせること、つまり必要なときにオブジェクトを読み込むことです。

実施原則：

まず最初に読み込むべき最初の画像が多数必要であり、読み込みが完了したら、後で必要な画像を表示します。

達成するための手順:

1. 画像を読み込む
2. 読み込む画像を決定する
3. 目に見えない読み込み画像
4. 実際の写真を置き換える

CSS スタイル:

    <スタイル>
        画像 {
            幅: 400ピクセル;
            高さ: 300px;
            表示: ブロック;
        }
        。行{
            幅: 300ピクセル;
            高さ: 400px;
        }
    </スタイル>

HTML部分:

  <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/図片(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/図片(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(54).jpg">

なぜ2つのパスがあるのですか? imgには本物の写真と偽物の写真があるため、まず偽物を読み込み、それを本物の写真に置き換える必要があります。下の図では、偽物が左側にあり、本物の写真が右側にあります。

スクリプト部分:

    <スクリプト>
        let view = document.documentElement.clientHeight; //ブラウザウィンドウの表示領域の高さを取得する function fn1(){
            setTimeout(function lazyload() { // 1秒後に実行を開始するタイマーを追加します let imgs = document.querySelectorAll('img'); // すべてのimgタグを取得します // console.log(imgs);
            for (let item of imgs) { // for-of を使用してすべての画像を反復処理します // ブラウザに画像の位置を表示します let rect = item.getBoundingClientRect(); // 表示領域内の各画像の位置を見つけます console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) { //if文で画像の下部が0より大きくブラウザの表示領域より小さい場合は次の操作を行う item.src = item.getAttribute('data-original') //data-originalのパスを取得しimgに渡す
                }
            }
        },1000)
        }
        関数fn1();
        document.addEventListener('scroll',fn1) //スクロールイベントが発生すると、fn1関数のタスクが実行されます</script>

for-in や for ループの代わりに for-of を使用するのはなぜですか?詳細については、ES6のfor-ofが何を取得するかを参照してください。

効果は以下のとおりです。

完全なコード:

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>遅延読み込み</title>
    <スタイル>
        画像 {
            幅: 400ピクセル;
            高さ: 300px;
            表示: ブロック;
        }
        。行{
            幅: 300ピクセル;
            高さ: 400px;
        }
    </スタイル>
</head>
<本文>
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/図片(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/図片(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/図片(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/図片(54).jpg">
    <スクリプト>
        view を document.documentElement.clientHeight に設定します。
        関数fn1(){
            setTimeout(関数lazyload() {
            imgs = document.querySelectorAll('img');
            // コンソールログ(画像);
            for (let 項目のimgs) {
                // ブラウザに画像の位置を表示します。let rect = item.getBoundingClientRect();
                コンソールにログ出力します。
                if (rect.bottom >= 0 && rect.top < ビュー) {
                    item.src = item.getAttribute('データオリジナル')
                }
            }
        },1000)
        }
        関数fn1();
        document.addEventListener('スクロール',fn1)
    </スクリプト>
</本文>
 
</html>

読み込み中の写真は下記に添付しています。もちろん自分で探すこともできます（自分で探すのは面倒だと思いますが—.—）。他の写真も自分で探すのが面倒な場合は、プライベートメッセージを送っていただければ整理してお送りしますღ( ´･ᴗ･` )