JavaScriptで画像をプリロード（先読み）する方法をわかりやすく解説

画像のプリロードとは？

Webページの表示速度やUX（ユーザー体験）を向上させるテクニックの一つに「画像のプリロード（先読み）」があります。これは、ユーザーが実際に画像を目にする前に、あらかじめブラウザに画像を読み込ませておく処理のことです。スライドショーやギャラリー、ホバー時に画像を切り替えるボタンなど、後から素早く画像を表示したい場面で特に効果的です。

JavaScriptによる基本的なプリロードの方法

JavaScriptでは、Imageオブジェクトを生成してsrcプロパティにURLを設定するだけで、簡単に画像を先読みできます。

function preloadImage(url) {
    let img = new Image();
    img.src = url;
    return img;
}

// 使用例
const img = preloadImage('https://example.com/photo.jpg');

new Image()で作成したオブジェクトにsrcを代入すると、その時点でブラウザが画像ファイルのダウンロードを開始します。このとき画像は画面には表示されませんが、ブラウザのキャッシュに保存されるため、後から同じURLの<img>タグなどを表示した際は即座に描画されます。

注意点：ガベージコレクションによるキャッシュ解放

ここで一つ重要な注意点があります。プリロードしたImageオブジェクトへの参照を保持しないと、数秒後にブラウザによってメモリが解放（ガベージコレクション）され、せっかく読み込んだ画像のキャッシュも失われる可能性があります。

これを防ぐためには、関数の外側などスコープが生き続ける場所で、生成したimgオブジェクトへの参照を保持しておく必要があります。上記のコード例では、戻り値としてimgを返し、変数に格納することで参照を維持しています。

複数の画像をまとめてプリロードする例

実践では複数枚の画像を一度に先読みしたいケースが多いでしょう。以下のように配列とループを組み合わせると便利です。

const urls = [
    'images/photo1.jpg',
    'images/photo2.jpg',
    'images/photo3.jpg'
];

// 参照を保持する配列（これがないとGCで解放される）
const preloadedImages = [];

urls.forEach(url => {
    const img = new Image();
    img.src = url;
    preloadedImages.push(img);
});

読み込み完了のタイミングを検知する

onloadイベントを使えば、画像の読み込みが完了したタイミングを検知できます。ローディング表示の解除などに活用できます。

function preloadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

preloadImage('images/photo.jpg')
    .then(img => console.log('読み込み完了'))
    .catch(() => console.error('読み込み失敗'));

まとめ

• new Image()でオブジェクトを作成し、srcにURLを設定すると画像を先読みできる。
• 参照を保持しないと数秒後にガベージコレクションで解放されるため、変数や配列に保持する。
• Promiseを使うと読み込み完了のハンドリングがしやすくなる。

プリロードを適切に活用すれば、ページ切り替え時のちらつきや遅延を抑え、快適なユーザー体験を提供できます。ぜひ実装してみてください。