Webページ畫像の怠zyな読み込みを効率的に実裝する：応答性とパフォーマンスの両方を考慮に入れる

Webページのパフォーマンスを最適化するために、畫像の怠zyなロードを検討したことはありますか？怠zyなロードテクノロジーは、初期ページの負(fù)荷重量を効果的に削減し、Webページの読み込み速度を改善できます。この記事では、応答性の高い畫像と最高のユーザーエクスペリエンスを考慮しながら、効率的な畫像の怠zyなロード方法を調(diào)べます。

Lazy Loadingはブラウザのネイティブ機(jī)能ではなく、現(xiàn)在JavaScriptの助けを借りて実裝する必要があります。 Chrome 75以降のバージョンは、畫像とIFRAMEの怠zyなロードをネイティブにサポートすることを計(jì)畫していますが、他のブラウザと互換性があるためにJavaScriptソリューションを使用する必要があります。多くの靜的なWebサイトジェネレーター、ライブラリ、およびフレームワークは、怠zyな読み込み機(jī)能を箱から出して提供しますが、この機(jī)能を?qū)g裝するためだけにフルライブラリまたはフレームワークを?qū)毪工毪?、パフォーマンスがオーバーヘッドを引き起こす可能性があります。したがって、私たちは自分で怠zyなロードを?qū)g裝することを選択しました。

コアメカニズム：

ほとんどの怠zyなロード方法は、次のパターンに従います。

1. HTMLタグ：使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705448368.jpg" class="lazy" alt="自分の怠zyなロードを転がすためのヒント">

2. 読み込み時間： Intersection Observer APIを使用して、畫像がビューポートに入るかどうかを検出します。 Intersection Observer効率的な要素の可視性検出を提供し、頻繁なscrollを回避し、イベントリスニングのresize 。

 //交差點(diǎn)オブザーバーを作成します
const observer = new IntersectionObserver（lazyload、{
  rootmargin： '100px'、
  しきい値：1.0
}）;

function lazyload（elements）{
  element.foreach（image => {
    if（image.interectionRatio> 0）{
      image.src = image.dataset.src;
      Observer.Unobserve（畫像）;
    }
  }）;
}

//すべてのIMG要素を「怠zy」クラスconst lazyimages = document.queryselectorall（ 'img.lazy'）;
lazyimages.foreach（img => {
  Observer.observe（IMG）;
}）;

改善と最適化：

上記の基本的な方法にはいくつかの欠點(diǎn)があります。

1. JavaScriptの依存関係： JavaScriptがロードされて実行されるまで、畫像を表示できません。
2. 視覚的な鼓動：寫真が読み込まれる前にページは空白であるため、視覚的な不満を引き起こす可能性があります。

上記の問題に応じて、次の改善を行いました。

1. ネイティブのレイジーロード検出：機(jī)能検出を使用して、ブラウザがネイティブloading="lazy"屬性をサポートするかどうかを判斷します。サポートされている場合は、JavaScript介入なしで直接使用してください。

 if（htmlimageelement.prototypeの「loading」）{
  document.QuerySelectorall（ 'img.lazy'）。
} それ以外 {
  //交差點(diǎn)オブザーバーを使用して、怠zyなロードを?qū)g裝します}

2. プレースホルダーマップとCSS遷移：小型のプレースホルダーマップを初期狀態(tài)として使用し、CSSを使用してスケーリングおよびぼやけて、畫像をロードしてスムーズな遷移を?qū)g現(xiàn)した後にぼやけ効果を削除します。

<picture>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg" class="lazy" alt="自分の怠zyなロードを転がすためのヒント">
</picture>

Picture {width：100％;オーバーフロー：隠し; }
Picture IMG {width：100％;遷移：0.5秒フィルター。 }
picture.lazy img {filter：blur（20px）; }

3. レスポンシブ畫像：使用<picture></picture>要素と<source></source>要素は、異なるビューポートサイズに応じて異なるサイズの寫真をロードするレスポンシブ寫真を?qū)g裝します。

補(bǔ)助ツール：

開発プロセスを簡素化するために、次の補(bǔ)助ツールを使用できます。

1. HTMLジェネレーター：生成を支援するカスタム機(jī)能またはテンプレートエンジン<picture></picture>要素のHTMLコード。

2. 畫像バッチ処理： gulp-image-resizeなどのツールを使用してさまざまなサイズの寫真を生成するか、クラウドサービス（NetlifyやCloudinaryなど）を使用して寫真をオンデマンドで変換します。

要約：

この記事では、効率的な畫像怠zyな読み込み実裝方法を紹介します。ネイティブのレイジーロード機(jī)能検出、プレースホルダーマップ、CSSトランジション、レスポンシブピクチャ、補(bǔ)助ツールを組み合わせることで、パフォーマンスを確保しながらユーザーエクスペリエンスを改善できます。適切な畫像処理方法（ビルドまたはオンデマンド変換）を選択すると、プロジェクトのサイズと要件に依存します。この方法では、Webページの読み込み速度を大幅に改善し、より滑らかな視覚効果を提供できます。

以上が自分の怠zyなロードを転がすためのヒントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。