jquery.lazyload.jsを使ってみた(画像の遅延読み込み)

こんにちは開発者のKです。

スマートフォンでWebページを閲覧する機会が増えた昨今、比較的貧弱な3G回線でもスムーズに閲覧できるように
サーバへのリクエスト数やダウンロードするリソースの容量はなるべく抑えたいですよね。

通常ページ容量の大半を占めるのは画像だと思いますので、その一つの解決策として画像の遅延読み込みを実装したjqueryのプラグイン「jquery.lazyload.js」を使ってみましたので所感を述べたいと思います。

遅延読み込みについて

通常ブラウザはHTMLを1行目から順に解析していき、imgタグやcssのbackgroudで指定された画像を発見した際、即時画像のダウンロードを開始します。

画像の遅延読み込みとは、この読み込みタイミングを遅延させ、ページを一度表示し終わった後に非同期でダウンロードしようというものです。
ブラウザの表示領域は限られていますから、表示領域の外にある画像は、あとから読み込んでも影響は少ないよね、という考え方です。
これにより、最初にページ読み込みが完了までのページ容量を削減し、表示速度の高速化が期待できます。

使い方

簡単な使い方は以下の通りです。

1. jquery本体とlazyloadを読み込みます。
2. 遅延読み込みさせたいimgタグにlazyクラスを付与します。このクラス名は任意に変更可能です。srcには仮で表示させる画像を指定しておき、data-originalに本来表示させる画像のURLを指定します。
3. step2で付与したlazyクラスを持つ要素に対して、lazyloadを実行します。その際、様々なオプションを渡すことができます。

lazyloadのオプション

ソースを見ると、lazyloadには様々なオプションがありますが、公式ドキュメントなどでもあまり触れられていないので、紹介したいと思います。

threshold

thresholdで指定したピクセル数より下にある画像を読み込み対象とすることができます。

デフォルト値は0なので、描画領域に入った際に読み込み開始しますが、例えばスマートフォンで縦にスクロールしていくリストページを考えた時、640としておけば次の1スクロール分も事前に読み込んでおくことができます。

failure_limit

一度読み込み対象となったが、何らかの理由により読み込み完了していない画像を、何回まで再読み込みを試みるかを指定します。

コードを読んだだけで実際に試していないので、間違っていたらすみません。

event

読み込み対象を検知するイベントを指定します。デフォルトはscrollなので、ページスクロールの度に読み込み対象を再走査します。
ここにはカスタムイベントを指定することも可能で、例えばスワイプによるカルーセルUIを実装したプラグインと組み合わせて、スワイプの度に再走査をかけることも可能です。
※jqueryカスタムイベントの発火はtrigger('event_name')で行えます。

effect

遅延読み込み後に画像を表示する際の効果を指定します。デフォルトのshowはただ表示するだけですが、

fadeInとすると、アニメーションでリッチに表示することができます。

container

遅延読み込みを行う範囲を指定します。デフォルトはwindowオブジェクトなので、ページ全体となります。

特定のdivタグ内に限定したい場合などに使えると思います。

data-attribute

imgタグのdata属性の名前を変更できます。デフォルトはサンプルの通りdata-originalですが、他ライブラリとの名前の衝突などで変更したい場合に役立ちます。

skip_invisible

trueを指定すると、対象の画像が可視状態でない場合(display: noneなど)は読み込みがスキップされます。

appear

対象の画像が描画領域に入った際に(threshold含む)実行されるコールバックメソッドを登録できます。
第一引数には遅延読み込み前の要素数、第二引数にはオプション(lazyloadで渡したものとデフォルト値がマージされたもの)が渡されます。

一覧ページにおいて、画像以外にもtwitter, Facebookボタンの様な通信を要するウィジェットが実装されているケースがあるかと思います。
そんな時にページ表示時にまとめて初期化するのではなく、個別に初期化処理を走らせれば、より初回表示時のコストを削減できますね。
イメージ：

$('img.lazy').lazyload({
    appear: function (left, settings) {
        // ツイートボタンも遅延読み込み
        (typeof twttr !== 'undefined') && twttr.widgets.load();
    }
});

load

appearと似ており、対象の画像が読み込み完了した際に実行されるコールバックメソッドを登録できます。

placeholder

画像が遅延読み込みされるまでに表示する仮画像を指定します。
デフォルトではグレーの画像となっていますが、任意の画像に差し替えることができます。
元のimgタグのsrcに指定しても同じ挙動となります。

遅延読み込みはSEO的に良くない？

こんな記事がありました。

最近ではGoogleのクローラもJavascriptを実行できるようですが、遅延読み込みのトリガーの実装方法によっては、クローラに画像が認識してもらえないケースがあるとのことです。

ユーザの入力を起点(スクロール等)とする場合、クローラは再現できないようですね。

実際にFetch as Googleしてみて何かわかったらまた記事にしたいと思います。

Read More