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

ネイティブ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
>

画像の遅延読み込みは、スクロールバーが下にスクロールしたときに画像が表示領域に到達するかどうかを判断することであることはわかっています。

そのため、スクロール監視中に画像が表示されようとしているかどうかを判断する必要があるため、まず画像の実際のアドレスを非表示にする必要があります。つまり、カスタム属性 data-src を使用して画像の実際のアドレスを保存し、スクロールバーが表示できる画像までスクロールしたときに実際のアドレスを読み込みます。

最初の方法を見てみましょう

方法1: 高コントラスト

ここでは、(要素の上部からの高さ - スクロールされるページの高さ <= ブラウザの表示領域の高さ) を使用して、必要な条件を満たしているかどうかを判断します。ここでは、ページがスクロールされたときの画像の高さの変化をリアルタイムで監視する必要があります。

/**
 * 方法 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: getBoundingClientRect() APIを使用する

まず、MDNのgetBoundingClientRect()の説明です。

getBoundingClientRect().top を使用すると、要素とビューポートの上部の間の距離を取得できるため、getBoundingClientRect().top と window.innerHeight の値の関係を比較して、遅延読み込み効果を実現できます。ここでは、getAttribute() 属性と setAttribute() 属性が使用されます。

 /**
  * メソッド 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);
      }
    })
  })

方法3: 最新のIntersectionObserverコンストラクタを使用する

上記の 2 つの方法を読んだ後、遅延読み込みは非常に簡単だと思いませんか?

確かに、私たちは非常に少ないコードしか書いておらず、見た目もシンプルでしたが、重要な問題を見落としていました。

画像が実際のアドレスに置き換えられた後、スクロールバーを繰り返し引くと、if() 条件が継続的にトリガーされます。

そこでMethod2メソッドでconsole.log(img.src);を実行しました

目的は、誰かがスクロール バーを引っ張り続けると、console.log(img.src) が継続的に印刷されることを確認することです。

では、実際のアドレスが読み込まれた後に画像に対する頻繁な操作を防ぐにはどうすればよいのでしょうか。また、ブラウザのパフォーマンスを最適化するにはどうすればよいのでしょうか。

幸運なことに、条件文が頻繁にトリガーされる問題を解決する新しいコンストラクターが登場しました。

このコンストラクタはIntersectionObserverです

MDNの説明によると

  • IntersectionObserver() コンストラクターは、IntersectionObserver オブジェクトを作成して返します。 rootMargin が指定されている場合は、構文の準拠がチェックされ、しきい値がすべて 0.0 ~ 1.0 の範囲内にあることが確認され、しきい値のリストが昇順に並べ替えられます。しきい値リストが空の場合、デフォルトで [0.0] の配列になります。
  • コールバック要素の表示比率が指定されたしきい値を超えると、コールバック関数が呼び出されます。このコールバック関数は、次の 2 つのパラメータを受け入れます。
    エントリは IntersectionObserverEntry オブジェクトの配列であり、各オブジェクトは指定されたしきい値から多かれ少なかれ逸脱します。
    オブザーバーが呼び出される IntersectionObserver インスタンス。

ここでは最初のパラメータコールバックのみを使用します

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

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

交差しているかどうかを表すプロパティ isIntersecting: false が見つかりました。コンストラクタの意味から、交差は観察されているかどうかとして理解できることがわかります。

観測された場合、その実アドレスをsrc属性に置き換え、観測をキャンセルします。

 /**
  * メソッド 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 インスタンス。各画像に観測インスタンスを追加します})
  }

この方法では、if() 条件文を頻繁にトリガーできなくなります。

画像が実際のアドレスに置き換えられた後、現在の画像の監視をキャンセルしたため、現在の画像に対してイベントはトリガーされず、ブラウザのパフォーマンスが大幅に最適化されました。

要約する

これで、ネイティブ JS を使用して遅延読み込み lazyLoad を実装する 3 つの方法について説明したこの記事は終了です。JS を使用して遅延読み込み lazyLoad を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 画像のプリロードと遅延ロードを実装するJavaScript
  • js画像の遅延読み込みの実装
  • JS を使用した画像の遅延読み込みプロセスの詳細な説明
  • Vue.js でルートの遅延読み込みを実装する方法
  • 画像の遅延読み込み効果を実現する js
  • JavaScript 遅延読み込みの詳細な説明

<<:  Nginx 1つのドメイン名で複数のプロジェクトにアクセスする方法の例

>>:  MySQL プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法

推薦する

Docker で最初のアプリケーションをデプロイする方法

前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...

Linux での grep コマンドの使い方の詳細な説明

1. 公式紹介grep は Linux でよく使用されるコマンドです。これは、ファイルやテキストに対...

MYSQL の 10 の典型的な最適化ケースとシナリオ

目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...

Webフロントエンドスキル概要(個人の実務経験)

1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...

Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明

サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...

MySQL での Join の使用に関する詳細な説明

前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...

HTML のキャンバスに基づくスクリーンショットのデモ

冒頭に書いた以前、Renren で JS ベースのスクリーンショット ソリューションについて説明した...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

MySQL 学習のまとめ: InnoDB ストレージ エンジンのアーキテクチャ設計の予備的な理解

1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...