Lazy Load Plugin for jQuery - イメージの遅延ロード jQueryプラグイン

2010/10/09 00:45 Update

TAGS: イメージ | 遅延ロード | LazyLoad | jQuery | プラグイン

Lazy Load Plugin for jQueryはjQueryのプラグインで、スクリーン範囲内の画像しか読み込まない、スクロールするたびに画像を順次に表示させていくことができます。

Webページを開くと同時にサーバにある画像リソースが読み込まれ、画面に表示されます。Webページに画像大量ある場合、画面の表示が重くなることがあります。

Lazy Load Plugin for jQueryは画像を遅延ロードすることで、画面表示を軽くしたりサーバ負荷軽減したりすることはできます。

動作環境

言語：JavaScript（jQuery.js）
ライセンス：MIT

デモ

（スクロールしてみてください）

使い方

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

$("img").lazyload();

これで、すべての画像が遅延ロードモードに適応されます。

オプションの設定もできます。

$("img").lazyload({ 
    placeholder : "img/grey.gif",    //表示前の代替え画像
    effect : "fadeIn"            //エフェクト設定
});

ページロードが終了後に画像をロードさせる例：

$(function() {          
    $("img:below-the-fold").lazyload({
        placeholder : "img/grey.gif", 
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

Lazy Load Plugin for jQuery - イメージの遅延ロード jQueryプラグイン

動作環境

使い方

Sponsored Link

Comments

Relative Articles

分类

Newest Top10