2013年9月26日(木) 10時05分13秒 [仕事]

今見えている範囲の画像だけを先に読み込んで、スクロールしないと見えない画像は後回しにする方法

画像の掲載が多いウェブページで段組が使われている際などでは、「ページの下の方にある画像」を読み込む処理のために、「今見えている範囲内の画像」の読み込みが遅れてしまうことがあります。

閲覧者に待ち時間を意識させないようにするには、「今見えている範囲の画像」を優先的に読み込んでくれるのが望ましいですよね。
「今見えている範囲の画像」さえ早く表示されれば、たとえページ全体の読み込み完了までに時間がかかったとしても、体感待ち時間は軽減できます。

画像の読み込みを遅らせるスクリプトを活用すれば、《閲覧者が（画像の表示位置まで）スクロールして来ない限り》画像を読み込まないようにできます。

jQueryを使って動作する画像読込遅延スクリプト「Lazy Load Plugin for jQuery」を利用して、閲覧者がスクロールするまで画像の読み込みを行わないようにする方法の解説記事を、All Aboutで公開しました。

◆閲覧者がスクロールするまで画像の読み込みを待つ方法（＠All About ホームページ作成）

img要素の記述方法を特殊にするなど、HTML側のソース修正も必要ではありますが、作るのは簡単です。
画像の多いページなどで、ぜひ試してみて下さい。