画像が表示領域に入ったら読み込むjQueryプラグイン lazy load

画像が表示領域に入ったら読み込むプラグインlazyloadの使い方です。
画像を大量に読み込むサイトで使用すると、スクロールして画像が表示領域に入ってから読み込んでくれるので、最初の読み込み時間の短縮になります。

デモページ

使い方

プラグインを読み込む

以下からプラグインをダウンロードして、読み込んでください。
Lazy Load Plugin for jQuery（ページ下部のDownloadというところです）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
    <script>
		$('.lazy').lazyload({
			effect: 'fadeIn',
			effectspeed: 2000
		});
	</script>

html

遅延して読み込ませたい画像のclass名に、上記のJS4行目で指定したクラス名を追加します。
今回は class=”lazy です。
クラス名を指定したくない場合は、jsで $(‘img’).lazyload({…　と指定してもOK。
src属性には、表示領域に入るまで仮で表示させておくダミー画像（目立たないほうがいいので、1×1の透過画像など）を指定。
data-original属性に表示させたい画像のパスを指定します。

<img class="lazy" src="dummy.gif" data-original="01.jpg" />

以上の設定で、画像が遅延して読み込まれるようになります。

デモページ