Lazy Load(画像の遅延読み込み)を実装する方法

更新日: 2015/09/02 [更新履歴]
公開日: 2015/03/01

この記事では、画像のレイジーローディング(遅延読み込み)を実装する方法を説明しています。転送量の節約、ページの表示速度の向上に繋がる技術なので、導入をお勧めします。SYNCERでも、2015年2月に、転送量に悩み、導入しました。

Lazy Load Plugin for jQuery: レイジーロードを実装するためのプラグイン、「Lazy Load Plugin for jQuery」の公式ウェブサイト。基本的な機能の説明など。

レイジーロード(遅延読み込み)とは？

レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？

転送量の節約

ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。

このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲覧者側にとっては、例えば、モバイルの転送量制限に達するリスクが増える、などとお互いに良いことはありません。

レイジーロード(遅延読み込み)を実装することで、この問題が解決します。何故なら、画面外にある画像を読み込まない(転送しない)からです。「閲覧者が見た範囲の分だけ、画像を読み込ませる」というこの技術は、余計な転送を発生させないという大きなメリットを与えてくれるわけです。

ページ表示速度の向上

「余計な転送を発生させない」という仕様は、「ページ表示速度を向上させる」という効果を生みます。これについては、説明はいらないと思います。「余計な画像を読み込まない」ということは、それだけ、訪問時のページの読み込み時間が短縮されるということです。すぐに表示され、操作できるページは快適です。同じ内容のコンテンツでも、読み込み完了が速い(快適)か遅い(不快)かでユーザーの反応が変わってくるでしょう。ページ表示速度の向上は、地味でも、あなたのウェブサイトの発展に貢献するはずです。

サンプルデモ

レイジーロード(遅延読み込み)をするサンプルデモです。とはいえ、この記事で紹介するLazy Loadというライブラリは、とてつもなくスムーズに動作することで、遅延読み込みしていること自体になかなか気付けません。ということで、あえて、ゆっくりと3秒かけて表示させるようにしています。スピードは、オプションで自由に調整可能です。

サンプルデモを見る

ライブラリの入手

Lazy Loadの先駆け的存在の「Lazy Load Plugin for jQuery」というライブラリを利用しましょう。このサイトでも利用させてもらっています。

tuupola/jquery_lazyload: GitHub内のプロジェクトページ。画面右側にある「Download Zip」というリンクから、プログラムをダウンロードできます。

ダウンロードしたjquery_lazyload-master.zipを解凍すると、jquery_lazyload-masterというフォルダの中に、様々なファイルが含まれているのを確認できます。その中で利用するのは、jquery.lazyload.js、またはjquery.lazyload.min.js(軽量版)のどちらか1つだけでOKです。

jquery_lazyload-master.zip

jquery_lazyload-master
- jquery.lazyload.js
- jquery.lazyload.min.js

プログラミング

ライブラリを入手したら、早速、レイジーロードを実装してみましょう。3つの簡単な手順です。

ライブラリを読み込む

それでは早速、画像の遅延読み込みを実装してみましょう。まずはHTMLのヘッダー内で、ダウンロードしたjquery.lazyload.jsを読み込みます。その前に、jQueryも読み込んでおいて下さい。

HTML

<head>
	<!-- jQueryライブラリの読み込み -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- ライブラリの読み込み -->
	<script src="./jquery.lazyload.js"></script>
</head>

HTMLタグを用意する

遅延読み込みする画像は、次の通り、指定します。普段はsrc属性に指定する画像のURLを、data-original属性に指定して下さい。そして、遅延読み込みする画像には印として、lazyというクラス属性値を付けます。data-originalやlazyといった名前は、オプションで自由に調整可能です。

HTML

<img data-original="./picture.jpg" class="lazy">

Lazy Loadを起動する

ライブラリの読み込みとHTMLの準備ができたら、仕上げにLazy Loadを起動しましょう。これで、画像が画面に映ったタイミングで読み込まれるようになります。簡単ですねー。

JavaScript

// Lazy Loadを起動する
$( function()
{
	$( 'img.lazy' ).lazyload() ;
} ) ;

プレースホルダーを指定する

本画像を読み込む前に表示させておくダミー画像(プレースホルダー)を設定するには、src属性に、その画像のURLを指定して下さい。これを指定しない場合は、何もないところから画像が出てきます。デモページでは、クリックしないと画像が表示されないように設定してあります。通常だと、動作が速過ぎて、ダミー画像があることに気付けないためです(笑)。

JavaScript

<img src="./dummy.png" data-original="./image.jpg" class="lazy">

このコードの動作を確認する

カスタマイズ

基本的な使い方は分かっていただけたかと思います。この章では、Lazy Loadをよりイメージ通りに作動させるためのオプションの使い方を紹介します。

オプションの指定方法

オプションは、Lazy Loadを起動させる際の第1引数に、オブジェクト形式で指定することができます。例えば、thresholdとeffectを指定する場合は、次の通りです。

JavaScript

$( "img.lazy" ).lazyload(
{
	threshold: 200,			// 200pxの距離まで近づいたら表示する
	effect: "fadeIn",		// じわじわっと表示させる
});

「エフェクトのスピードも加えたいな〜」と思ったら、次の通り、追加して下さい。順番は自由です。

JavaScript

$( "img.lazy" ).lazyload(
{
	threshold: 200 ,			// 200pxの距離まで近づいたら表示する
	effect: "fadeIn" ,		// じわじわっと表示させる
	effect_speed: 3000 ,		// 3秒かけて表示させる
} ) ;

オプションの一覧

Lazy Loadを起動させる際の、用意された主なオプションを下記にまとめてみました。

threshold: 何pxほどまで近づいたら画像を表示させるか、のピクセル値を数値で指定します。大きい数値になるほど、先に読み込みます。
event: 通常は、スクロールして近づいた時に画像を表示させますが、クリックした時、マウスオーバーした時、などと条件を変更することができます。; click … クリックしたら画像を表示する。; mouseover … 画像にマウスを重ねた時に表示する。
effect: fadeInを指定すると、じわーっと画像を表示させる。
effect_speed: fast、slow、またはミリ秒単位の数値を指定することで、フェードインのスピードを調整することができます。例えば、3000を指定すると、3秒かけて表示します。
failure_limit: その都度、表示させるかを判定する画像の数を指定します。通常は1つの画像のみを判定します。DOM(HTMLソース)の上から順に、画像を判定するようになっていて、通常は、DOM上で上にある画像が表示されるまでは、それ以降の画像は表示されません。それだと、例えば、サイドバーにある画像など、DOM上の順番と、実際の表示の順番が違う画像があった時に困ってしまいますよね。そこで、このオプションに数値を指定することで、1つの画像のみじゃなく、指定した数だけ、画像を表示させるかを判定するようになります。