画像が表示領域に入ったら読み込む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" />

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

デモページ

RELATED POSTS