AngularJSのアプリケーションで画像の遅延読み込み(レイジーロード)を導入したメモ

※別にAngularJSに依存していないので、この方法はAngularJS以外でも大丈夫です。

目的

• スマホサイトなどでページ表示の体感速度を早めたい
  • ⇒ブラウザスクロールで表示領域にはいったタイミングで画像をロードさせる

デモ

• http://hkusu.github.io/AngularJS_lazyload_demo/
  • 初期表示でブラウザに収まってる画像は、スクロールしないと取得しにいかないようだ（仕様？）
  • 開発ツールでHTTPリクエストをみてみると、確かに画像が必要になったタイミングで取得しにいっている

導入したもの

• このJavaScriptライブラリ
  • https://github.com/jmmerino/jquery-lazyload
• ほかのJSライブラリとして Lazy Load Plugin for jQuery があり、そちらの方がメジャーのようだが、AngularJSかBootstrapと競合するのか、うまく動かなかった。
  • 私が導入した環境はこちら。
    • ただ特に環境に依存しないので、下記の手順でどの環境にも適用できると思われる。

導入手順

① Bower で JSのライブラリをローカルに取得

$ bower install jquery-lazyload --save

• もしjQueryもまだ未取得の場合は bower install jquery --save で取得する

② 対象ページのHTMLでJSライブラリをインクルード

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery-lazyload/jquery.lazyload.js"></script>

③ 対象ページのimgタグを修正

<img src="images/dummy-1px.png" data-src="images/big.jpg" width="600" height="400" class="lazy">

• data-srcの方に 本当の画像パスを指定。dummy-1px.png は実在しなくてもよい模様。
• width と height をちゃんと指定しておかないと、ブラウザスクロール時にガタガタするので指定すること。
  • ダミー画像もその横幅縦幅で表示される。

ほか

• AngularJS の ng-src だと動かなかったので普通に img src タグを利用。
• わりとライトなJSライブラリなので、必要に応じて処理は変更できそう。