ネイティブJSを使用した遅延読み込みlazyLoadの3つの方法の概要

<スタイル>
    * {
      パディング: 0%;
      マージン: 0%;
    }

    .contain画像{
      幅: 600ピクセル;
      高さ: 400px;
    }

    ul {
      リストスタイル: なし;
    }

    li {
      表示: インラインブロック;
    }
  </スタイル>
  
  
  <div class="contain">
    <ul>
       <li><img data-src="./images/iu.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu6.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu7.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu8.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu9.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu10.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/zzf_01.jpg" src='./images/lazy.png' alt=""></li>
    </ul>
  </div
>

/**
 * 方法 1 * 高さのコントラスト */
 let imgs = [...document.querySelectorAll('img')]; // まずすべての画像を取得します window.addEventListener('scroll', function () {
   
 })

 /**
  * 方法 1 * 高さのコントラスト */
  let imgs = [...document.querySelectorAll('img')]; // まずすべての画像を取得します window.addEventListener('scroll', function () {
    遅延読み込み(画像)
  })
  関数 lazyLoad(imgs) {
    (var i = 0; i < imgs.length; i++) {
      var height = imgs[i].offsetTop; // 画像の上からの高さ var wheight = window.innerHeight; // ブラウザの表示領域の高さ var sheight = document.documentElement.scrollTop; // スクロールされたページの高さ if (height - sheight <= wheight) { // 画像が表示されるかどうかを判断 imgs[i].src = imgs[i].dataset.src; // カスタム アドレスが表示された後、実際のアドレスに変換します}
    }
  }

 /**
  * メソッド 2 * @params getBoundingClientRect()
  * ビューポート API
  */

 imgs = [...document.querySelectorAll('img')] とします。
 window.addEventListener('スクロール', 関数() {
    imgs.forEach(画像 => { 
      //これは実際には方法 1 と同じ考え方ですが、少しシンプルです if (img.getBoundingClientRect().top < window.innerHeight) { 
     
        let dataSrc = img.getAttribute(' data-src'); // data-src の実際のアドレスを取得します。 img.setAttribute('src', dataSrc); // 実際のアドレスを src 属性に置き換えます。 console.log(img.src);
      }
    })
  })

window.addEventListener('スクロール', 関数() {
// まず、このコンストラクターをインスタンス化します。const observe = new IntersectionObserver(callback);
// 次に、ビジネスを処理するために必要なコールバック関数コールバックを記述します
   const コールバック = エントリ => {
        console.log(entries); //まずエントリを出力して、それが何に役立つかを確認しましょう //以下のように};
}

window.addEventListener('スクロール', 関数() {
   const observe = 新しい IntersectionObserver(コールバック);
// 次に、ビジネスを処理するために必要なコールバック関数コールバックを記述します
   const コールバック = エントリ => {
       // 配列であることがわかったので、entries.forEach(ele => {
           console.log(ele); // 要素を再度出力して、その中身を確認してみましょう // 以下に示すように})
    };
}

 /**
  * メソッド 3 * @params new IntersectionObserver(callback[,options])
  * 観察-->コンストラクタ*/
  window.addEventListener('スクロール', 関数() {
    imgs = [...document.querySelectorAll('.img')] とします。
    const callback = entrys => { // entrys は観測された要素配列です。entries.forEach(ele => {
            if (ele.isIntersecting) { // isIntersecting が監視されます const data_src = ele.target.getAttribute('data-src'); // これは基本的に Method1/Method2 と同じです ele.target.setAttribute('src', data_src); // ele.target はターゲット要素です observe.unobserve(ele.target) // 実際のアドレスが置き換えられた後、監視を解除します }
        })
    };
    const observe = new IntersectionObserver(callback); // IntersectionObserver をインスタンス化します
    imgs.forEach(画像 => { 
        observe.observe(image) // observe: 呼び出される IntersectionObserver インスタンス。各画像に観測インスタンスを追加します})
  }