画像の読み込みを遅延ロードさせる＠jQuery-Lazy Load

htmlページ内の画像（img要素）を遅延ロードし、HTTPリクエストを減らして読み込み速度のパフォーマンスを向上させるのにjQueryプラグインのLazy Loadを使ってみました。

以前から有名でよく見かけるプラグインでしたが、実際はその効果（HTTPリクエストを減らす）がないっていう話（実際に解析されてる記事がありましたね）で「ふーん、そうなのか」とすっかり忘れていたプラグインです。

久しぶりにこれ系（遅延ロード）のものを探したら、なんでもその問題が解消されてるらしく、使ってみました。

理屈はこういうことだそうです。（小粋空間さんの記事）

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

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

画像ばかりをベッタベッタと（しかもそれぞれがでかくて容量もある）貼って作ったようなLPとか、とにかく画像（img要素）が多いページにおいてパフォーマンスの向上が図れるようです。（表示領域に入ってから画像を読み込む＝遅延ロードさせるので）

WordPressのプラグイン版もあるそうなので、WordPressで画像をたくさん公開されてる方は使ってみるとよいですね。

今回はjQuery本体とLazy Loadプラグインを読み込んで、単一の静的なLP（ランディングページ）に使ってみました。以下、使い方。

Lazy Load Plugin for jQueryをダウンロード

http://www.appelsiini.net/projects/lazyload

ページ下部のほうにある「Download」のところからリンク文字列をクリックして、ソースを表示させたらそれをブラウザから保存します。今回は「minified」版を使いました。

jQueryとlazyloadを読み込む

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/vendor/jquery.lazyload.min.js"></script>

あとは実際にLazy Loadを起動させるスクリプトを追加します。今回はページ中の全ての要素を対象として良かったので「’img’」をセレクタで指定してます。実際はAbove the fold（いわゆるファーストビューというやつ）領域で表示される、上のほうのものは対象にしなくても良さそうですが、アニメーション効果もオプションで指定したらちょっとだけリッチ感が出たので、このほうがお客さんも喜ぶかも、、しれません。（逆もあり得ます）

<script>
    $('img').lazyload({
        effect: 'fadeIn',
        effectspeed: 2000
    });
</script>

遅延ロードの対象要素に設定を加える

このプラグインはダミー画像を先に読み込んでおいて、実際の画像はその画像が表示領域に入ってから読み込むそうなので、img要素の記述を変更します。普通にimg要素を表示させるには以下の記述を使用。

<img src="img/sample.png" width="300" height="200" alt="サンプル">

srcにダミー画像を指定し、別に「data-original」とういう属性を追加し、この値に本来の画像のパスを指定します。

<img src="img/transparent.gif" data-original="img/sample.png" width="300" height="200" alt="サンプル">

ダミー画像には1×1サイズの透過gif（transparent.gif）を用意して指定しました。

オプション

オプションには前述のeffectやeffectspeed、画像を表示する際に指定するevent、イベント発生時の対象領域の指定（container）等があるようです。詳細は公式ページもしくは小粋空間さんの記事を参照されるのがよいでしょう。