Lazy Load Plugin for jQuery

デモページ

デモページ

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

• jQuery（jquery.js）
• Lazy Load Plugin for jQuery（jquery.lazyload.js）

以前はオブジェクトの位置情報を取得する 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 ですが、画像を読み込むイベントを指定できます。