【React】 画像の表示遅延を解消！起動時に画像のプリロードを実装する

はじめに

現在、reactの学習の一環で、ガチャやコレクション機能を持つwebアプリを開発しており、
その際、「ガチャを引いた後に画像が遅れて表示される（レンダリング遅延）」という課題に直面しました。

この記事では、その遅延を解消するために行った「アプリ起動時の画像プリロード（事前読み込み）」の実装についてまとめました。

---

💻 開発環境

• フロントエンド: React (v19.3.1)
• ビルドツール: Vite (v8.3.5)
• スタイリング: Tailwind CSS (v4.3.3) / @tailwindcss/vite
• 言語: TypeScript(v5.9.3)

---

💡 課題：画像を遅延読み込みしていたことによるカクつき

開発中のアプリには、ガチャを引いて新しいキャラクターを手に入れたり、図鑑（コレクション画面）で一覧を見たりする機能があります。

しかし、改善前は以下のような課題がありました。

• ガチャを引いてから画像の表示タイミングで初めて画像がダウンロードされるため、表示されるまでにわずかなタイムラグが発生する

そのため、通信環境や端末の状況によっては画像が表示されるまでにモタついてしまい、スムーズなガチャ演出の妨げになっていました。

---

🚀 解決策：アプリ起動時の画像プリロード実装

この遅延を解消するため、アプリを起動した（画面を開いた）タイミングで、あらかじめ必要なすべての画像をバックグラウンドで読み込んでおく（プリロードする）ように実装を変更しました。

実際に実装したコードの例です。Image オブジェクトを動的に生成し、一括で読み込みを行っています。

pleloadImages.ts

// アプリ起動時に画像を事前に読み込む処理のイメージ
export const preloadImages = (imageUrls: string[]) => {
  imageUrls.forEach((url) => {
    const img = new Image();
    img.src = url;
  });
};

これをアプリの初期化時（Appコンポーネントのマウント時など）に呼び出すことで、バックグラウンドで静かに画像がキャッシュされるようになります。

App.tsx

import { preloadHamsterImages } from './utils/preloadImages';

export function App() {
  useEffect(() => {
    // アプリ起動時に画像を裏で一括読み込み
    preloadHamsterImages(64);
  }, []);

---

📊 導入後の効果（検証）

ブラウザの開発者ツール（Networkタブ）で確認した様子がこちらです👇

アプリ起動時に ham0.webp や ham1.webp などの画像が事前にフェッチされ、ステータスが 304 Not Modified（キャッシュからの読み込み）として綺麗に処理されていることが分かります。

おわりに

「画像をあらかじめ読み込ませておく」という非常にシンプルな内容ですが、ガチャやコレクション系UIのUXを向上させる上では非常に効果的でした。

同じようにWebアプリの画像読み込み遅延やカクつきにお悩みの方は、ぜひ試してみてください！

• デモアプリ: Ham Collection (デモURL)
• ソースコード: GitHub Repository

---