ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

閲覧者がスクロールするまで画像の読み込みを待つ方法(3ページ目)

掲載画像の多いページでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている部分」の読み込みが遅れてしまうことがあります。それを防ぐために、1画面目以降の(すぐには見えない位置にある)画像に関しては、閲覧者がスクロールするまで画像を読み込まないようにする方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スクリプトが実行できない環境への対処

JavaScriptが実行できない環境は最近ではあまりないでしょうが、そのような環境にも対処しておきたい場合には、以下の方法があります。

STEP.1 noscript要素を追加
まず、先ほどご紹介したdata-original属性を使った特殊なimg要素に続いて、noscript要素を使って通常のimg要素も併記します。例えば、以下のようにです。
<img src="ダミー画像" data-original="本来の画像" class="lazy" width="764" height="510" alt="写真1">
<noscript><img src="本来の画像" width="764" height="510" alt="写真1"></noscript>
これによって、スクリプトが実行できない環境では、noscript要素の中身(本来の画像を表示するimg要素)が表示されます。

STEP.2 CSSを追加
上記だけだと、(スクリプトが実行できない環境では)ダミー画像と本来の画像の両方が見えてしまいます。それを防ぐために、以下のスタイルシートを記述します。
img.lazy {
   display: none;
}

STEP.3 JavaScript(jQuery)ソースを修正
上記のCSSによって、ダミー画像は表示されなくなります。しかし、このままだと、スクリプトが実行可能な環境では何も表示されなくなってしまいます。そこで、lazyloadメソッドを実行する記述を以下のように修正します。
<script type="text/javascript">
   $(function() {
      $("img.lazy").show().lazyload();
   });
</script>
これによって、非表示状態になっている対象を表示してから、lazyloadメソッドが実行されるようになります。

上記のSTEP.1~3のように記述することで、スクリプトが実行できない環境では、最初からすべての画像が読み込まれる(表示される)ようになります。

閲覧者がクリックするまで読み込まないようにする

「Lazy Load Plugin for jQuery」を実行するスクリプト部分にオプションを追記することで、閲覧者がダミー画像をクリックするまで、本来の画像を読み込まないようにもできます。

HTMLの末尾に記述していたソースを以下のように修正します。
<script type="text/javascript">
   $("img.lazy").lazyload({
      event : "click"
   });
</script>
こうすると、ダミー画像がクリックされない限り、本来の画像は表示されません。

画面外の画像はクリックされるまで表示されないサンプルページ

画面外の画像はクリックされるまで表示されないサンプルページ

上記のソースを使ったサンプルページを用意していますので、実際にブラウザでアクセスして、動作を試してみて下さい。

スクロールせずに見える範囲内に収まっている画像は、最初から読み込まれて表示されます。しかし、それ以降の画像は(スクロールしても)ダミー画像のままです。ダミー画像をクリックすると、クリックした箇所の画像だけが読み込まれます。


 

画像を最初から全部は読み込まないようにして、ダウンロード量を減らす

今回は、「閲覧者がスクロールするまで画像を読み込まない」ようにするスクリプト「Lazy Load Plugin for jQuery」の使い方をご紹介致しました。画像の掲載数が多く、最初の1画面よりも後にたくさん画像が出てくるようなページで、閲覧者の読み込み待ちストレスを軽減させるために、ぜひ、試してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます