遅延読み込み画像枠
遅延読み込み画像枠は、画面に入ってきた瞬間に初めて中身を読み込ませる仕組みのデモです。中心となるのは IntersectionObserver で、対象の枠が表示領域に交差したことを検知すると、プレースホルダにクラスを付けて見た目を切り替え、一度処理したら disconnect() で監視を解除します。
解説
遅延読み込み画像枠は、画面に入ってきた瞬間に初めて中身を読み込ませる仕組みのデモです。中心となるのは IntersectionObserver で、対象の枠が表示領域に交差したことを検知すると、プレースホルダにクラスを付けて見た目を切り替え、一度処理したら disconnect() で監視を解除します。これにより、最初から全部読み込むのを避け、必要になったものだけを後から取得する流れを再現しています。実画像では、このタイミングで本来の画像 URL を割り当てます。
効果が出る場面
- 縦に長いページで、下のほうにある大量の画像を抱えるとき
- ギャラリーや一覧で、初期表示の速さを優先したいケース
- 通信が限られる環境への配慮が必要なサイト
読み込みを始める手前の余裕は監視の rootMargin で調整でき、早めに取得すれば表示までの待ちが減ります。なお、現在の標準では img 要素に loading="lazy" を付けるだけで似た効果が得られるため、まずはそちらを試すのが簡単です。アクセシビリティ面では、実画像に意味のある代替テキストを必ず添えてください。
よくある質問
標準機能だけでも遅延読み込みできますか
画像要素に loading の指定を付けるだけで、多くのブラウザが画面に近づいてから読み込んでくれます。細かな制御が要らなければ、この標準機能を使うのが手軽でおすすめです。
読み込みを始めるタイミングを早められますか
交差を監視する際の余白の値を広げると、枠が画面に入る少し手前で読み込みが始まり、表示までの待ち時間を減らせます。逆に狭めれば、より直前まで読み込みを遅らせられます。