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

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

Posted at November 21,2012 1:55 AM
Tag:[jQuery, LazyLoad]

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

1.概要

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">

2.サンプル

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

サンプル
サンプル

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

3.Lazy Loadプラグインのダウンロード

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

Download

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

4.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属性の画像が表示されます。

5.オプション

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

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'
    });
});
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)