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

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

画像を遅延ロードする定番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属性に指定した画像を読み込みます。 ２．サンプル サンプルを作りましたのでお試しください。 サンプル スクロールすると画像を順次表示します。 ３．Lazy Loadプラグインのダウンロード 「Lazy Load」のページ 下にある「source」または「minified」を右クリックして「名前をつけてリンク先を保存」を選択します。 ダウンロードしたjquery.lazyload.jsまたはjquery.lazyload.min.jsを、サーバの任意のディレクトリにアップロードします。 ４．Lazy Loadプラグインの設定 簡単なサンプルとして、次のimg要素を用意します。src属性にはダミー画像のURLを設定し、data-original属性に表示したい画像のURLを設定します。width属性、height属性も設定しておくことを推奨します。 body終了タグの直前に下記のscript要素を記述します。jquery.lazyload.jsのパスなどは適宜変更してください。 $('.lazy').lazyload(); これでスクロールしたときに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' }); }); Posted by yujiro このページの先頭に戻る

http://www.koikikukan.com/archives/2012/11/21-015555.php