画像読み込み中にアニメーションを表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

ローディング

画像読み込み中にアニメーションを表示する方法

画像読み込み中にアニメーションを表示する方法を紹介します。画像の読み込みが完了するまでローディングアニメーションを表示し、読み込み完了後に画像へ切り替えることで、通信状況をユーザーへ分かりやすく伝えられます。画像サイズが大きい場合や通信速度が遅い環境でも、画面が真っ白になる時間を減らし、快適な閲覧体験につながります。

このサンプルでは、HTML・CSS・JavaScriptを使って画像の読み込み状態を判定し、読み込み中はアニメーションを表示、画像の読み込み完了後に自動でアニメーションを非表示にする方法を紹介します。特別なライブラリは使用せず、そのまま導入しやすいシンプルな構成になっているため、既存サイトへ組み込むことも簡単です。

商品画像やプロフィール画像、ギャラリー画像など、読み込みに時間がかかる画像を表示する場面で活用できます。画像が表示されるまでの待ち時間を分かりやすくしたい方や、ユーザーへ読み込み中であることを伝えたい方におすすめのサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

サンプル画像
「画像を読み込む」を押すと読み込み中アニメーションを表示し、画像の読み込み完了後に画像へ切り替えます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>画像読み込み中にアニメーションを表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 画像表示エリア -->
  <div class="image-loading-animation_box">

    <!-- 読み込み中アニメーション -->
    <div class="image-loading-animation_loader" id="loader">
      <div class="image-loading-animation_spinner"></div>
    </div>

    <!-- 表示する画像 -->
    <img
      src="sample-image.jpg"
      alt="サンプル画像"
      class="image-loading-animation_image"
      id="sampleImage">

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

4つのファイルを同じフォルダへ配置し、表示したい画像を用意してください。画像ファイル名はサンプルでは sample-image.jpg を使用していますが、任意の名前でも利用できます。その場合は、HTMLの src 属性も同じファイル名へ変更してください。ブラウザで index.html を開くと、画像の読み込み中はアニメーションが表示され、読み込み完了後に自動で画像へ切り替わります。読み込み中アニメーションの色やサイズ、回転速度はCSSから自由に変更できます。 

sample/
├── index.html
├── style.css
├── script.js
└── sample-image.jpg

4つのファイルを同じフォルダへ配置し、表示したい画像を sample-image.jpg に置き換えてください。その後、ブラウザで index.html を開くと、画像の読み込み中はアニメーションが表示され、読み込み完了後に自動で画像へ切り替わります。読み込み中アニメーションの色やサイズ、回転速度はCSSから自由に変更できます。

コメント