自分の怠zyなロードを転がすためのヒント

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

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

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

コアメカニズム：

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

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

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

 //交差点オブザーバーを作成します
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）;
}）;

改善と最適化：

上記の基本的な方法にはいくつかの欠点があります。

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

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

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

 if（htmlimageelement.prototypeの「loading」）{
  document.QuerySelectorall（ 'img.lazy'）。
} それ以外 {
  //交差点オブザーバーを使用して、怠zyなロードを実装します}

2. プレースホルダーマップとCSS遷移：小型のプレースホルダーマップを初期状態として使用し、CSSを使用してスケーリングおよびぼやけて、画像をロードしてスムーズな遷移を実現した後にぼやけ効果を削除します。

<picture>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg?x-oss-process=image/resize,p_40" 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>要素は、異なるビューポートサイズに応じて異なるサイズの写真をロードするレスポンシブ写真を実装します。

補助ツール：

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

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

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

要約：

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

以上が自分の怠zyなロードを転がすためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。