[jQuery] Lazy Load – 画像を遅延ロードするプラグイン

ウェブページに貼られている画像がスクロールされて、ブラウザの表示域に入ったときに初めてロードされることを Lazy Load と言うらしい。Pre-load の反対ね。日本語だと遅延ロードと呼ばれることが多いかな。

最近そういうワザを使ったサイトを目にすることがチラホラあったので、どうやっているのか調べたら手軽に使えそうなjQueryプラグインを見つけたので試してみる。

tuupola/jquery_lazyload
https://github.com/tuupola/jquery_lazyload

使い方

スクリプトの読み込み。

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

1 2	<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script>

画像は１つずつ以下のように貼り付ける。

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

1	<img class="lazy" data-original="img/example.jpg" width="640" height="480">

そしてキックする。

<script>
$(function() {
    $("img.lazy").lazyload();
});
</script>

$(function() {

$("img.lazy").lazyload();

});

</script>

指定可能なオプションもあり。以下一例。詳しくは公式サイトにて。

$("img.lazy").lazyload({
    effect: 'fadeIn',　 //フェードイン効果
    effectspeed: 1000   //フェードイン速度
}

$("img.lazy").lazyload({

effect: 'fadeIn',　 //フェードイン効果

effectspeed: 1000 //フェードイン速度

}