小粋空間  -  a cheap joke and a play on words site

画像を遅延ロードする定番jQueryプラグイン「Lazy Load」

画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。

１．概要

jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。

以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。

参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う

改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。

<img src="grey.gif" data-original="foo.jpg"  width="640" heigh="480">

２．サンプル

サンプルを作りましたのでお試しください。

サンプル

スクロールすると画像を順次表示します。

３．Lazy Loadプラグインのダウンロード

「Lazy Load」のページ下にある「source」または「minified」を右クリックして「名前をつけてリンク先を保存」を選択します。

ダウンロードしたjquery.lazyload.jsまたはjquery.lazyload.min.jsを、サーバの任意のディレクトリにアップロードします。

４．Lazy Loadプラグインの設定

簡単なサンプルとして、次のimg要素を用意します。src属性にはダミー画像のURLを設定し、data-original属性に表示したい画像のURLを設定します。width属性、height属性も設定しておくことを推奨します。

<img class="lazy" src="white.gif" data-original="example.jpg"  width="640" heigh="480">

body終了タグの直前に下記のscript要素を記述します。jquery.lazyload.jsのパスなどは適宜変更してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>
$('.lazy').lazyload();
</script>

これでスクロールしたときにdata-original属性の画像が表示されます。

５．オプション

プラグインにはオプションがいくつか用意されています。ここでは代表的なものを抜粋して紹介します。

effect：フィードイン効果を付与できます。

$(function(){
    $('.lazy').lazyload({
        effect: 'fadeIn'
    });
});

effectspeed：フィードインの速度をmsで設定できます。

$(function(){
    $('.lazy').lazyload({
        effect: 'fadeIn',
        effectspeed: 2000
    });
});

event：画像を表示するイベントを指定します。たとえば「click」を指定すれば、スクロールだけでは画像は表示されず、クリックしたときに初めて表示されます。

$(function(){
    $('.lazy').lazyload({
        event: 'click'
    });
});

container：イベント発生時の対象領域を指定します。

$(function(){
    $('.lazy').lazyload({
        container: $("#hoge")
    });
});

data_attribute：data-xxxの「xxx」の部分を設定できます。

$(function(){
    $('.lazy').lazyload({
        data_attribute: 'foo'
    });
});