序文まず、次のようにページを構築しましょう。 <スタイル> * { パディング: 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 つの方法を読んだ後、遅延読み込みは非常に簡単だと思いませんか? 確かに、私たちは非常に少ないコードしか書いておらず、見た目もシンプルでしたが、重要な問題を見落としていました。
では、実際のアドレスが読み込まれた後に画像に対する頻繁な操作を防ぐにはどうすればよいのでしょうか。また、ブラウザのパフォーマンスを最適化するにはどうすればよいのでしょうか。 幸運なことに、条件文が頻繁にトリガーされる問題を解決する新しいコンストラクターが登場しました。 このコンストラクタはIntersectionObserverです MDNの説明によると
ここでは最初のパラメータコールバックのみを使用します 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Nginx 1つのドメイン名で複数のプロジェクトにアクセスする方法の例
>>: MySQL プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法
前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...
1. 公式紹介grep は Linux でよく使用されるコマンドです。これは、ファイルやテキストに対...
目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...
CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...
1. pipとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンイ...
1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...
サーバーも 2 つあります。準備:コンテナのホスト名を設定する consul: kv タイプのストレ...
序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...
導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...
目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...
前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...
冒頭に書いた以前、Renren で JS ベースのスクリーンショット ソリューションについて説明した...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...
1. ストレージエンジン前のセクションでは、SQL 実行プランは、エグゼキュータ コンポーネントがス...