序文まず、次のようにページを構築しましょう。 <スタイル> * { パディング: 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 プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
div で background-color と background-image を同時に設定する...
Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...
私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...
チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...
<div align="center"> <table sty...
目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...
画像をプルする docker pull season/fastdfs:1.2トラッカーを開始 doc...
目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...
tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...
広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...
インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...
【1】<i></i>タグと<em></em>タグ同じ...
目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...
前回の記事では、webpack と react 環境を設定した後、ログイン インターフェースとその後...