画像の読み込みが遅かったので対応メモ（jquery lazy load使用）

やりたかったこと

画像の一覧ページの表示が非常に重いとのことで見てみると1ページに表示してるコンテンツの画像は10件。
けど1ファイルのサイズがどれも3Mくらいあってそのまま表示してるだけなので、それは重くなるなぁと、、、

対応案としては
案1. jqueryのlazy loadを使って画像を遅延ロードさせる（画像が読み込まれるまで読込み中などの画像を表示させる）
案2. 画像サイズ自体を小さくしてしまう

あたりが思いあたった。
で、案2で調べるとimagemagickの「jpeg:extent」というオプションでファイルの最大サイズを指定してリサイズ(画質を落とす)ことが可能で、これができれば根本的な解決になるし容量の節減にもなるしいいとは思った。
のだが、コンテンツもそこまで多くないし既存のコンテンツをリサイズする手間＋アップロードの際にリサイズする改修が必要でちょっと手間だったので、lazy loadを使ってサクっと対応することになったのでそのメモ

やったこと

準備

まずは「lazy load」を読込み
このページにあるのでダウンロードしてもよいしcdnも用意されているようなので以下のように直接読み込んでしまってもok。
ちなみにjqueryも必要。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

で、あとは読み込み中に表示する画像も適当に準備
ここでは「loading.gif」とかにしておきます

実装

<!-- 画像の一覧ここから -->
<div id="list-image">
  <img src="/images/loading.gif" data-original="/images/image1.jpg">
  <img src="/images/loading.gif" data-original="/images/image2.jpg">
  <img src="/images/loading.gif" data-original="/images/image3.jpg">
  ・・・
</div>

<!-- Lazy Loadの処理 -->
<script>
$("img").lazyload({
  container: $(".image-list"),
  effect:"fadeIn",
  effectspeed: 1000
});
</script>

実装も簡単でこんな感じで簡単でした。
以上です