画面のスクロールに合わせて画像を読み込むjQueryプラグイン「LazyLoad with jQuery」

Lazy Load Plugin for jQueryを使用すると、画像を全て読み込ませずに順次読ませていくことが出来ます。
画面に表示されている画像をロードしていくので画像を多用するサイトでは負担を軽減してくれるので役立つと思います。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

Lazy Load Plugin for jQuery


デモページ


デモページ

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

以前はオブジェクトの位置情報を取得する jQuery Dimensions Plugin が必要だったみたいですが、現在はこの2つのみで大丈夫みたいです。

スクロール時に画像を読み込みフェードイン表示

jsファイルのロード

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.lazyload.js" type="text/javascript"></script>

使用例

<script type="text/javascript">
$(document).ready(function(){
	$("img").lazyload({
		placeholder : "grey.gif",
		effect : "fadeIn"
	});
});
</script>

placeholder はまだ画像を読み込んでない場合の代替ファイルです。小さなサイズの画像を指定しておきます。

イベントの指定

$("img").lazyload({ 
	placeholder : "img/grey.gif",
	event : "click"
});

またデフォルトは scroll ですが、画像を読み込むイベントを指定できます。

  

共有やブックマークなど