画像の遅延読み込み
画像が表示範囲に入ったときだけ読み込みます。
「画像の遅延読み込み」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
遅延読み込みの考え方
遅延読み込みでは、画像がスクロールして表示される直前までダウンロードを遅らせます。これにより帯域幅を節約し、特に画像が多い長いページで初期ページの読み込みを高速化できます。
実際の URL の保存
ポイントは、最初から実際の画像 URL を src に設定しないことです。data-src 属性に保存しておけば、ブラウザはまだダウンロードしません。
// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.遅延読み込み対象の画像の選択
遅延読み込みが必要なすべての画像を集めます。共通のクラスを付けるか、data-src が存在することを利用するのが一般的です。
const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');オブザーバーの作成
画像が交差したら実際の画像を読み込むオブザーバーを作成します。rootMargin を使って、画像が表示される少し前に読み込みを開始します。
const observer = new IntersectionObserver((entries, obs) => {
// handle entries here
}, { rootMargin: '100px' });交差時の読み込み
画像が交差したら、その data-src の値を src にコピーします。するとブラウザが画像をダウンロードして表示します。
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // triggers the download
}
});
}, { rootMargin: '100px' });読み込み後の監視停止
読み込みが完了した画像を再び監視する必要はありません。unobserve を呼び出してリソースを解放し、再度トリガーされるのを防ぎます。
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
obs.unobserve(img); // done watching this one
}監視の開始
すべての遅延読み込み対象画像をループ処理して監視を開始します。ユーザーがスクロールしている間の処理はオブザーバーが担当します。
lazyImages.forEach(img => observer.observe(img));プレースホルダーの表示
実際の画像の読み込み中に小さくぼかしたプレースホルダーや単色を表示すると、滑らかな体験になります。その後、画像の load イベントで本来の画像をフェードインさせます。
img.addEventListener('load', () => {
img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;ネイティブの loading 属性
最新のブラウザでは、img と iframe に loading="lazy" を設定することで、ネイティブの遅延読み込みも利用できます。Intersection Observer は、カスタム制御やアニメーション、フォールバック動作に引き続き役立ちます。
// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">
// Observer approach gives more control and effects.data-src の後処理
読み込み後に data-src 属性を削除すると、DOM を整理された状態に保ち、後のコードやクエリで混乱するのを避けられます。
img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);全体のパターン
Intersection Observer を使った遅延読み込みは、整理された効率的なパターンです。URL を data-src に保存し、各画像を監視して、交差したら実際の URL に置き換え、その後監視を停止します。その結果、必要なタイミングで画像を読み込む高速なページになります。
確認問題
画像の遅延読み込みについての理解度を確認します。
まとめ
画像の遅延読み込みを実装しました。
- 実際の URL を
data-srcに保存します。 - Intersection Observer で各画像を監視します。
- 交差したら
data-srcをsrcにコピーし、unobserveを呼び出します。 rootMarginを使って、表示直前に先読みします。- ネイティブの
loading="lazy"は、より簡単な代替手段です。
次は、無限スクロールを実装します。
よくある質問
「画像の遅延読み込み」レッスンは無料ですか？
はい。「画像の遅延読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「画像の遅延読み込み」で何を学びますか？
画像が表示範囲に入ったときだけ読み込みます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「画像の遅延読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 要素の表示状態を監視する
- 画像の遅延読み込み
- 無限スクロール
- スクロールで発火するアニメーション