普段サイトを作る時にはあまり画像を使わないのですが、画像をけっこう使うサイトを作ったので入れてみました。

公式サイト:http://www.appelsiini.net/projects/lazyload

このjQueryプラグインの概要としては、ページ読み込み時に全ての画像を取りに行くのではなく、ページのスクロールやクリックに合わせて随時必要な画像を取りに行くようにする。といったものです。
以前は、遅延読み込みが上手く行かなかったり、多重リクエストをかけるため逆にページが重くなるといった懸念点があったようですが、最新版では解消されているようです。
※サービス内に実装してみたところ、多少ですが読み込み速度が向上しているので、多分大丈夫だと思います。

つかいかた

① jquery.jsとjquery.lazyload.jsを入れる

まずは、サイトからjquery.lazyload.jsをDLしてきます。

  
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

しかるべきところに入れてください。

②遅延読み込みさせる要素を指定する。

ここから先は<body>…</body>の中に書いてください。

<script>
  $('.lazy').lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold : 200
  });
</script>

まず、最初の $(‘.lazy’).lazyload({ の部分。
サンプル通りに記載しても良いですが、画像全てを遅延読み込みさせたい場合などには

  ".lazy"

の部分を

  "img"

にしておけば画像全てが対象になります。
実装するサイトに合わせて記載をしてあげてください。

  effect: 'fadeIn',
  effectspeed: 1000,
  threshold : 200

この部分はオプションでつける箇所です。

  effect: 'fadeIn',

フェードインで画像を表示します。

  effectspeed: 1000,

フェードインのスピードをミリ秒で指定します。

  threshold : 200

事前に読み込んでおく分のピクセルを指定できます。
他にも色々あるようですので、公式ページを参考に追加してみてください。

③遅延読み込みさせる画像箇所にダミーを指定

 <img class="lazy" alt="" src="img/dummy.gif" width="640" height="480" data-original="img/sample.jpg">

ポイントは、通常画像のパスを記載するsrcの部分にはダミーの画像を指定して、data-originalの個所に正しい画像のパスを記載するところです。
こう記載することにより画像を読み込むアクションが実行されるまではダミーの画像を仮で表示しておき、実行される際に正しい画像を取りに行くようになります。

その他メモ

今回実装してちょっとハマったところやメモです。

  • 遅延読み込みさせる要素の指定は読み込み順で動かない場合もあるっぽい。動かなかったら</body>直前とかに書いてみてください。
  • サイズを%指定している画像は、ダミー画像が小さいと縦も目一杯取ってしまうので、レイアウト崩れが発生するかも。
    そういった場合は正しい画像と同じ大きさのダミー画像を用意する必要がありますね。
  • これを実装しても、よっぽど画像を使ってない限りは体感で若干早くなったかな…程度しか変わらないです。
    fade inなどのアニメーションでちょっとリッチになるおまじないくらいに思っとくのが良いかもです。

おまけ:ページ速度を検証したサイト

■Google ページスピードインサイト
http://developers.google.com/speed/pagespeed/insights/

■Pingdom Tools
http://tools.pingdom.com/fpt/

■GTmetrix
http://gtmetrix.com/dashboard.html

おわり。