スポンサード

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

まずは 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>

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

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>

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

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

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

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

エフェクトの設定

その他オプションですが、画像をフェードインで表示させる場合は effect:"fadeIn" とします。また effectspeed:1000 のようにフェードインの速度調整も可能です。

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

スポンサード