TopJavaScriptjQueryプラグイン > 2012年11月
2012年11月21日

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

November 21,2012 1:55 AM
Tag:[, ]
Permalink

画像を遅延ロードする定番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'
    });
});
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3