ネイティブ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 プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法

推薦する

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

CSS で background-color を使用して背景画像にマスク効果を追加する 2 つの方法

div で background-color と background-image を同時に設定する...

Nginx の書き換え正規マッチング書き換え方法の例

Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...

LinuxサーバーでRabbitMQ管理ページにアクセスできない問題を解決

私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

VueでEchartsチャートの幅と高さの適応を実現する実践

目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...

DockerにFastDFSをインストールする方法

画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

MySQLに必要な共通知識のまとめ

目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...

Reactはルーティングを使用してログインインターフェースにリダイレクトします

前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...