重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」

ブロードバンドが浸透しているとはいえ、画像を多く使用するとページが重くなり、表示速度が遅くなります。
また解像度を高くしたり、画像サイズを大きくしても重くなります。
Lazy Load Plugin for jQueryはディスプレイ範囲の画像のみを順番に表示するためページの読み込む時間を短縮できます。

使用方法
Lazy Load Plugin for jQueryからjquery.lazyload.jsをjQueryからjquery.js、jQuery Dimensions Pluginからjquery.dimensions.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>
上記を記述したら、あとは画像を普通に書き込めば完成です。
またオプションとして、thresholdとplaceholder、eventがあります。
thresholdは表示前に読み込むピクセル数を、placeholderは読み込んでいない画像に表示しておく背景画像を、eventは表示の仕方を記述します。
<script type="text/javascript">
$(function() {
$("img").lazyload({
threshold : 200,
placeholder : "背景画像",
event : "click"
});
});
</script>
重い画像を順番に読み込むjavascript「Lazy Load Plugin for jQuery」サンプル

2007年12月04日

前の記事：入力方法を指定するjavascript「Mask JavaScript API」
次の記事：Movable Typeで手軽に訪問者数などを確認するプラグイン「Visitor Stats」

関連記事

• 奥から手前にズームするJavaScript「Spacegallery.js」
• [jQuery]Galleria
• [jQuery]ScrollShow
• [jQuery]jQPanView
• [jQuery]Animated InnerFade with JQuer

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」