jquery.lazyload.jsの使い方まとめ

画像を遅延読み込みさせるjQueryプラグイン「jquery.lazyload.js」の使い方をメモ。

使い方

今回は以下のようなレイアウトの画像遅延して読み込ませてみます。
jquery.lazyload.js実装前のデモページ

jquery.lazyload.jsは下記からダウンロードできます。
tuupola/jquery_lazyload · GitHub

HTML内に必要なファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>

HTML

imgのファイルパスをsrcからdata-originalに変更して、遅延読み込み対象と分かるようにclassを付けます。

<img data-original="img/01.jpg" width="481" height="320" alt="" class="lazy" />

この時、画像サイズをwidthとheight属性で指定するか、CSSで指定するかしないといけないようです。

JavaScript

$(function() {
	$('img.lazy').lazyload();
});

jquery.lazyload.jsのデモページ
　

オプション

threshold

読み込みのタイミングをずらしたいときに使用します。
マイナスの値を指定した場合、読み込みのタイミングが遅くなります。

$(function() {
	$('img.lazy').lazyload({
		threshold: -200
	});
});

thresholdのデモページ
　

event

画像が画面内に表示された場合ではなく、指定したイベントが発生した時に表示されるようになります。
clickは画像をクリックしたとき、mouseoverは画像にオンマウスしたときに表示されます。

$(function() {
	$('img.lazy').lazyload({
		event: 'click'
	});
});

eventのデモページ

sportyを指定した場合、意図したタイミングで表示ができます。
以下の場合だと、読み込みが完了した5秒後に全ての画像を表示するようになります。

$(function() {
	$('img.lazy').lazyload({
		event: 'sporty'
	});
	$(window).on('load', function() {
		var timeout = setTimeout(function() {
			$('img.lazy').trigger('sporty');
		}, 5000);
	});
});

event: ‘sporty’のデモページ
　

effect

effectは表示時のエフェクトを指定します。
effect_speedと合わせて使用することで、エフェクトの時間も設定できます。

$(function() {
	$('img.lazy').lazyload({
		effect : 'fadeIn',
		effect_speed: 2000
	});
});

effectのデモページ
　

container

特定の要素内でスクロールする場合に指定します。

CSS

#contents {
	height: 500px;
	overflow-y: scroll;
}

JavaScript

$(function() {
	$('img.lazy').lazyload({
		container: $('#contents'),
		effect : 'fadeIn'
	});
});

containerのデモページ
　

data_attribute

画像のファイルパスの指定をdata-originalから変更します。

HTML

<img data-custom="img/01.jpg" width="481" height="320" alt="" class="lazy" />

JavaScript

$(function() {
	$('img.lazy').lazyload({
		data_attribute : 'custom',
		effect : 'fadeIn'
	});
});

data_attributeのデモページ
　

failure_limit

単純な縦並びなら問題ないのですが、メインコンテンツとサイドバーのようなレイアウトの場合、DOMの順番で後ろの方にある画像がうまく表示されない場合があります。
これは、画面外にある上から1番目の画像しかチェックしないためです。
failure_limit指定前のデモページ

failure_limitは何枚目までチェックするかを指定するもので、例えばfailure_limit: 9の場合、画面外にある1番目から10番目の画像をチェックして、画面内にある場合は表示されるようになります。

$(function() {
	$('img.lazy').lazyload({
		failure_limit: 9,
		effect : 'fadeIn'
	});
});

failure_limitのデモページ
　

skip_invisible

display: none;状態の画像をスキップするかどうか指定します。

$(function() {
	$('img.lazy').lazyload({
		skip_invisible: true
	});
});

skip_invisibleのデモページ
visibility: hidden;やopacity: 0;はこのオプションの対象外ですが、画像の読み込みは発生しますが表示自体はされません。
　

placeholder

読み込み前に表示しておく画像を指定します。

$(function() {
	$('img.lazy').lazyload({
		placeholder: 'img/dummy.jpg',
		event: 'mouseover'
	});
});

placeholderのデモページ

個別に指定したい場合は、imgにsrc属性を追加して指定します。

HTML

<img data-original="img/01.jpg" width="481" height="320" alt="" class="lazy" src="img/dummy1.jpg" />

placeholderのデモページ2
　

JavaScriptオフ時の対応

JavaScriptオフ時の場合、imgにsrc属性がないので画像が表示されません。
対応が必要な場合は、noscriptタグで本来のimgを埋め込み、CSSで遅延読み込み用の画像にdisplay: none;を指定しておいて、JavaScriptで表示するようにします。

HTML

<img data-original="img/01.jpg" width="481" height="320" alt="" class="lazy" />
<noscript>
	<img src="img/01.jpg" width="481" height="320" alt="" />
</noscript>

CSS

.lazy {
	display: none;
}

JavaScript

$(function() {
	$('img.lazy').show().lazyload({
		effect : 'fadeIn'
	});
});

JavaScriptオフ時の対応のデモページ
　

【参考サイト】

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