[jQuery]画像の読み込みを遅延させるプラグインLazy Load Plugin for jQuery

jQueryプラグイン・ライブラリ

2013.03.18

img要素の画像を遅延ロードさせることができるjQueryプラグインLazy Load Plugin for jQuery。

ブログで大量の画像を掲載しているような場合は、ページのスクロールに合わせて画像を読み込む（遅延ロード）ようにしてくれるLazy Load Pluginを利用すると良いかもしれません。

Lazy Load Plugin for jQuery のダウンロード
Lazy Load Plugin for jQuery の設置例

Lazy Load Plugin for jQuery のダウンロード

以下のページよりLazy Load Plugin for jQueryのファイルをダウンロードします。
Lazy Load Plugin for jQuery

Lazy Load Plugin for jQuery の設置例

Lazy Load Pluginは、ディスプレイで表示される範囲についてはオリジナルの画像を表示し、それ以外（ディスプレイ表示外）についてはダミーの画像を当て込んでおく、という使い方になります。

まずはjQueryファイルと一緒にjquery.lazyload.jsファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.lazyload.js"></script>
<script>
$(function() {
	$("img").lazyload({
		container: $(".contents"),
		effect:"fadeIn",
		effectspeed: 1000
	});
});
</script>

$(function() {

$("img").lazyload({

container: $(".contents"),

effect:"fadeIn",

effectspeed: 1000

});

</script>

オリジナル画像とダミー画像を用意

data-original に（オリジナルの）画像を指定し、srcにダミー画像を指定します。

ダミー画像は1pxのグレー塗りの画像などが良いかと思います。

<div class="contents">
<img data-original="img/example1.jpg" src="img/gray.gif" width="640" height="480">
<img data-original="img/example2.jpg" src="img/gray.gif" width="640" height="480">
<img data-original="img/example3.jpg" src="img/gray.gif" width="640" height="480">
<img data-original="img/example4.jpg" src="img/gray.gif" width="640" height="480">
</div>

</div>

遅延ロードの対象となる要素を指定

container: $(".contents")で遅延ロードの対象となる要素を指定しています。
※不要な場合は外しても問題ありません。

また、特定の要素内のimgを対象とする場合は、以下のように記述することもできます。

<script>
$(function() {
	$(".contents img").lazyload({
		effect:"fadeIn"
	});
});
</script>

$(function() {

$(".contents img").lazyload({

effect:"fadeIn"

});

</script>

エフェクトの設定

その他オプションですが、画像をフェードインで表示させる場合はeffect:”fadeIn”とします。

またeffectspeed:1000のようにフェードインの速度調整も可能です。

「Lazy Load」による画像の遅延ロードのデモ