画像の遅延読み込み-Intersection Observer API

オウルです。

今回は画像の遅延読み込み(Lazy Load)です。画像の遅延読み込みは、最初のページの読み込み時間、最初のページのデータ量、システムリソースの使用量を減らすことにより、パフォーマンスの向上に期待ができます。「Intersection Observer API 」を使って画像の遅延読み込みをしてみます。

Intersection Observer API

Intersection Observer API (交差監視 API) は、ターゲットとなる要素が、祖先要素もしくは文書の最上位のビューポートと交差する変更を非同期的に監視する方法を提供します。

ブラウザ間の互換性

スクロールしてボックスの背景色を変える

MDN Intersection Observer API に良いコードサンプルがあったので、このサンプルを使用します。

サンプルでは、監視要素が viewport(ルート要素) と交差する(見えるか見えないか)たびにコールされるコールバック関数(要素の背景色を変える)を構成しています。

環境

ブラウザ: Google Chrome
javascript: ES2015~

html

css

javascript

MDN にも注意事項として記載がありますが、コールバックはメインスレッドで実行されます。時間を要する処理の場合、Window.requestIdleCallback() などを使用してパフォーマンスを上げる工夫が必要になります。

画像の遅延読み込み

それでは上記のコードに、本題の画像の遅延読み込みのコードを足します。Google Developers で 「CSS での画像の遅延読み込み処理」の良質サンプルコードを見つけることができたので、これを参考にします。

ページが最初に読み込まれた時のオフスクリーン画像は、プレースホルダイメージを参照するようにします。

プレースホルダイメージ

250 * 250 1KB

そして、スクロールして監視要素が viewport に入ったときに、表示させたい画像を参照するようにします。

表示させたい画像

250 * 250 56KB

javascript

動作(CodePen)

Intersection Observer API での背景色の変更 + 画像の遅延読み込み動作を下の CodePen で確認できます。

See the Pen
BayLPEp
by owl (@blue-owl)
on CodePen.

Google Developers の CSS でのイメージ処理は、Intersection Observer API だけではなくドキュメント オブジェクト モデル(DOM)、CSS オブジェクト モデル(CSSOM)、レンダリング ツリーといったブラウザ内部の基本動作についても紹介されており、一見の価値ありのコンテンツです。

Intersection Observer API は便利ですが、ブラウザによっては polyfill する必要があります。モダンな環境で開発したい方はこちらを参考にしていただければと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA