【Javascript】【jQuery】画像の遅延読み込み

画像を大量に読み込むような場合、読み込むまでに時間がかかる。
読み込むまでの間、なにも表示されないと「壊れたかな？」と思ってリロードされる場合がある。
そうなると逆に負荷がかかり、余計に表示されなくなってしまう。

そこで、画像を表示する直前まで画像の読み込みをしないようにしてサーバ負荷を軽減する。
と同時に、ローディング中表示をすることによって余計な操作をさせないようにする。

jQueryのLazy Loadプラグインを使うことにする。
jQueryのプラグインなので、jQueryの後に読み込む。
同一サーバとの同時コネクション数に制限があるため、
スクリプトやCSSを外部から読み込む際は別サーバにした方がよい。
今回はGoogleのCDNを使う。

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

従来はimgタグのsrc属性で読み込む画像を指定していたが、LazyLoadプラグインではdata-original属性で読み込む画像を指定する。
src属性には、読み込み終わるまでに表示する画像を指定。今回はロード中画面を指定する。

<img class="lazy" src="img/gif-load.gif" data-original="image/graph1.jpg">

読み込んだオブジェクトに対して遅延読み込みを実行させる。
オプションを指定できる。サンプルで指定したオプションは以下の通り。
effect・・・フェードイン
effectspeed・・・500ミリ秒
threshold・・・画像読み込みまでのピクセル数

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