Lazy Loadを導入してスマホからの画像アクセス負荷を下げる（所要時間５分）

概要

• imgタグの多いhtmlなどを読み込んだとき、一斉に画像への接続が始まるが スマホは帯域が狭いし通信も不安定なので、httpサーバをapacheで運用していると コネクションを掴んだままなかなか離してくれずapacheが詰まりやすい
• 読み込み完了までスマホの挙動が重くなることもありUX的にもよくない
• なので画面上にimgタグの表示領域が来たところでloadさせるようにすれば、一気に接続が走ることはなくなる
• LazyLoadというjQuery pluginを利用すれば簡単に実装できます

最速の使い方

• 公式から落とす
  • http://www.appelsiini.net/projects/lazyload
• 使いたいページでロード

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="lazyload/jquery.lazyload.min.js"></script>
<script>
$(document).ready(function(){
    $("img.lazy").lazyload({
        effect : "fadeIn"
    });
});
</script>

• 適応させたいimgタグに対して以下のようにdata-originalで画像パスを指定、classをlazyにする。width,heightはcssか属性で指定しないとダメです。

<img class="lazy" data-original="画像パス.jpg"  width="640" height="480">
<noscript><img src="img/example.jpg" width="640" height="480"></noscript>

• 以上で画像のlazy loadが成功するはずです
• effectはfadeIn以外にもあります
• どこまで画像に近づいたら読み込み始めるかも設定可能
• 画像をクリックしたら、マウスオーバーしたら読み込みなども設定可能

まとめ

• お手軽に負荷を減らせるので、画像がたくさんあるリスト画面なんかはどんどん使ったほうがいいのではないでしょうか