画像の読み込みが完了するまでページを表示させない方法と実装例

Webサイトやブログを運営していると、画像がページ全体の表示速度に大きく影響することがあります。特に、画像が多いページでは、ユーザーにページを完全に表示させる前に画像が読み込まれるのを待たなければなりません。そのため、ページの表示が遅くなったり、画像が途中で読み込まれている状態を目にしたユーザーが不快に感じることがあります。

この記事では、画像がすべて読み込まれた後にページを表示する方法について解説します。jQueryを使った実装方法を具体的なコード例とともにご紹介し、実際にどのようにこの問題を解決できるかを見ていきます。

Contents

画像読み込みの遅延が発生する理由
jQueryを使った画像読み込み待機の実装
注意点
まとめ

画像読み込みの遅延が発生する理由

現代のWebサイトは、リッチメディアコンテンツ（画像や動画）を多用することが一般的です。しかし、その分だけ読み込み時間も増加します。ブラウザはHTML、CSS、JavaScript、画像など複数のリソースを一度にロードしますが、画像のファイルサイズが大きい場合、それが最も遅い要素となりページの表示が遅くなります。

多くのサイトでは、ページ全体が表示される前に、画像の読み込みがまだ完了していない状態でページが表示されることがあります。これによって、ページが部分的にしか表示されていないかのように見えることがあり、ユーザーにとっては快適な閲覧体験とはいえません。

これを防ぐために、「すべての画像が読み込まれるまでページを表示しない」というアプローチを取ることが考えられます。

jQueryを使った画像読み込み待機の実装

jQueryは、JavaScriptライブラリの一つで、ブラウザ間の互換性を気にせずにスクリプトを簡単に書ける便利なツールです。jQueryを使って、すべての画像が完全に読み込まれたことを確認してからページを表示させることができます。

手順1: jQueryの読み込み

まず、jQueryをWebページに読み込む必要があります。通常はCDNを使って読み込みます。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

これで、ページ内でjQueryの機能を使用できるようになります。

手順2: 画像を `data-src` 属性に格納

次に、ページ内の画像の src 属性を data-src 属性に一旦格納します。これによって、最初は画像がロードされない状態にします。

<img data-src="path/to/image1.jpg" alt="Image 1">
<img data-src="path/to/image2.jpg" alt="Image 2">

data-src 属性に画像のURLを設定し、ページが表示されるときに src 属性にその値を動的に設定します。これにより、画像の読み込みをコントロールできるようになります。

手順3: 画像がすべて読み込まれるまで待機

次に、すべてのリソース（画像やスクリプト）が完全に読み込まれたかを確認するため、window.onload イベントを使用します。このイベントは、ページのすべての要素が読み込まれた後に実行されます。以下のコードで、画像が読み込まれた後に data-src 属性の値を src 属性に設定し、画像を表示します。

<script>
  $(window).on('load', function() {
    // すべての画像をdata-srcからsrcにセットし、表示
    $('img').each(function() {
      var imgSrc = $(this).data('src');
      $(this).attr('src', imgSrc).css('display', 'block');
    });
  });
</script>

このコードにより、ページが完全に読み込まれた後に画像が表示されるようになります。

手順4: 初期状態で画像を非表示にする

画像の読み込みが完了する前に画像が表示されないように、初期状態ではCSSを使って img タグを非表示にしておきます。

<style>
  img {
    display: none;
  }
</style>

これで、画像の読み込みが完了するまで画像が表示されなくなり、window.onload イベントで画像を表示させることが可能です。

実際のコード例

実際のコード全体は以下のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画像の読み込み完了後に表示するページ</title>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    /* 画像が非表示のまま */
    img {
      display: none;
    }
  </style>
</head>
<body>

<!-- 画像をdata-src属性に追加 -->
<img data-src="path/to/image1.jpg" alt="Image 1">
<img data-src="path/to/image2.jpg" alt="Image 2">
<!-- 他の画像も同様に追加 -->

<script>
  $(window).on('load', function() {
    // すべての画像を読み込む
    $('img').each(function() {
      var imgSrc = $(this).data('src');
      // 画像を表示
      $(this).attr('src', imgSrc).css('display', 'block');
    });
  });
</script>

</body>
</html>

実装の効果

この方法を実装すると、ページが部分的に表示されることなく、すべての画像が正しく読み込まれた状態でユーザーに表示されます。特に、以下のようなメリットがあります。

ユーザー体験の向上: ページが完全に読み込まれるまでユーザーが中途半端なページ表示を見ることがなくなります。
パフォーマンスの向上: ページの読み込みを制御することで、ユーザーに快適な閲覧体験を提供できます。
画像が途中で表示される問題の解消: 画像が遅れて表示されるのを防ぎ、ページのレイアウトが一度に表示されるため、よりスムーズな表示が可能になります。

注意点

この方法にはいくつかの注意点があります。

最初の表示が遅くなる可能性: ページ全体を一度に表示するため、画像が多い場合には初回表示が遅れることがあります。これを防ぐために、画像の最適化を行うことが重要です。
Lazy Loadingとの組み合わせ: ページ全体のパフォーマンスを向上させるために、lazy loading（遅延読み込み）を組み合わせることも検討できます。必要な部分だけを先に読み込むことで、パフォーマンスをさらに向上させることが可能です。