単純遅延荷重

通常、JavaScriptを画像の遅延読み込みを処理するために書く必要があります.

  <img class="lazyload" src="placeholder.jpg" data-src="pine.png">

  <script>
    document.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset;
      const lazyImages = document.querySelectorAll('.lazyload'); 

      lazyImages.forEach(img => {
        if (img.offsetTop < (window.innerHeight + scrollTop)) {
          img.src = img.dataset.src;
          img.classList.remove('lazyload');
        }
      });
    });
  </script>

しかし、現在、あなたが単に使うことができる実験機能がありますloading="lazy" 同じ結果を得るには:

<img src="pine.jpg" loading="lazy">

を読み込むlazy , ブラウザは、すべての重いリフティングを行い、ユーザーが画像の近くにスクロールすると、画像ソースのみを読み込みます.私たちも私たちのマークアップを有効に保つためにプレースホルダの画像を使用する必要はありません!
今のところ、この機能は、クロム、エッジ、およびFirefoxでサポートされています.さあ、サファリ-それを得る!

以下にアクションを使用したビデオを示します。

私のブログでJSBITより多くのチェックインをチェックしてください.jsbits-yo.com . または私に従ってくださいTikTok