2012年3月13日火曜日

[jQuery]Lazy Loadで負荷低減できるか?

あるホスティングサービスで503エラーが出始めたため、
原因を調査したら同時アクセス数が増えてきた事が一番の原因のようでした。
そのサイトは画像を大量に利用することも原因に挙げられます。

なにか良い方法が無いかと調べたところ、画面の表示領域付近に近づいてから対象の画像を読み込むと言うjQueryプラグインがありました。

Lazy Load

使い方は非常に簡単です。
まず、<head>にjQueryと上記のプラグインを読み込みこんで、その実行コードを書きます。
以下のコードではオプション設定で、画面の表示範囲より200px広い範囲までをフェードインで読み込む。って感じです。


  1. <script src="jquery.js" type="text/javascript"></script>  
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>  
  3. <script type="text/javascript">  
  4. $(function(){  
  5.  $("img.lazy").lazyload({ threshold : 200 , effect : "fadeIn" });  
  6. });  
  7. </script>  


後は遅延ロードさせたい画像タグを以下のように書きます。
srcにはダミーの画像を設定しておき、data-originalに実際に読み込ませる画像を記述します。

  1. <img class="lazy" data-original="img/example.jpg" heigh="480" src="img/grey.gif" width="640">  

これだけです。


とりあえず、503エラーの発生率は下がったので効果はあったと言えそうです。
ただ、完全には無くなってないので別の対策も必要そうです。