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

画像が多い縦長のページでは、1画面目の表示完了にも時間がかかる場合がある

画像をたくさん掲載しているページでは、読み込み完了までに長い時間がかかることがあります。このとき、特に右図のように「複数段を用いたレイアウト」を採用している場合には、「ページの下の方にある画像」を読み込む処理のために、「今見えている部分」の読み込みが遅れてしまうことがあります。

待ち時間が長くなればなるほど、閲覧者にストレスを感じさせてしまいます。少なくとも、スクロールせずに見える「1画面目」を表示する待ち時間は、極力短い方が望ましいでしょう。

画面外にある画像の読み込みを遅らせる

そのような場合の解決策として、「今、画面内には見えていない場所にある画像の読み込みを遅らせる」という方法があります。

縦長のページでは、ページを構成するすべての画像が「最初の1画面」内に収まっているわけではありません。当然、下方向にスクロールしなければ見えない場所にある画像もたくさんあるはずです。そのような場所にある画像は、読み込みを後回しにしても問題ないでしょう。

「閲覧者がスクロールするまで画像を読み込まない」ようにするスクリプトを利用すれば、ほんの少しの記述だけで簡単に実現できます。

待ち時間が減らせて、余計なダウンロードも防げる

この種のスクリプトを活用すると、「すぐには見えない場所にある画像の読み込み」が原因で「最初に見える範囲の表示」が遅くなってしまうのを防げます。その結果、閲覧者が感じる待ち時間は減らせるでしょう。また、閲覧者がページの途中で閲覧をやめた場合には、(未表示部分の画像は読み込まれないため)無駄なダウンロードがなくなり、通信量を節約できます。画像をたくさん掲載していて、段組を活用しているようなページでは特に便利でしょう。

このような、画像の読み込みを遅らせる機能を実現するスクリプトには、例えば「YUI Imageloader」など、いくつかがあります。

今回は、jQueryを使って動作する「Lazy Load Plugin for jQuery」を利用して、閲覧者がスクロールするまで画像を読み込まないようにする方法をご紹介致します。

それでは、次のページから「Lazy Load Plugin for jQuery」の入手方法と、それを使うための記述方法を見ていきましょう。