画像を遅延読み込みできるjQuery Lazy Loadの仕組み・動作

ページの表示速度を早くするための技術にLazy Loadというものがあります。
ページ内の画像を初回ページ読み込み時ではなく、表示が必要になった時点で表示することで、ファーストビューの表示速度を短くする技術です。

LazyLoadのなかでも有名なのがjQueryのプラグインとして実装されているLazy Loadではないでしょうか
Lazy Load Plugin for jQuery

今日は、jQuery Lazy Loadがどのように動作しているかを書きたいと思います。

スポンサーリンク

仕組み自体は単純

遅延読み込みというとなんだかいろいろ動作しているように聞こえますが、Lazy Loadは超単純な動作をしています。以下の2つが主な動作となります。

  1. 遅延読み込みしたい画像は読み込まず、ダミー画像を表示しておく
  2. 表示が必要になったタイミングでダミー画像から本物の画像に差し替える

通常時の動作

まずはじめにLazy Loadを使わないときの動作を考えてみます。
Lazy Loadを使わないときは、ページに3枚の画像があれば初期表示時に3枚の画像を読み込みますし、100枚画像があれば100枚の画像を読み込み終わるまで初期表示が終わりません。

<img src="https://example.com/img/original.jpg">



Lazy Loadを実装したときの動作

imgタグの記述

Lazy Loadを実装した場合、imgタグのsrc属性にはダミー画像のURLを指定します。
また、imgタグのdata-original属性にオリジナル画像のURLを指定します。

<img src="https://example.com/img/dummy.jpg" data-original="https://example.com/img/original.jpg">
表示時の動作

imgタグのsrc属性にダミー画像のURLを指定してあるため、初期表示時にはダミー画像しか読み込まれません。その後、画面に表示されている部分のみdata-original属性からオリジナル画像のURLをコピーしてsrc属性に設定します。src属性に変更があったことをブラウザが検知してオリジナル画像をダウンロードし表示を行います。
スクロールがあったタイミングでも同様に画像が表示されるかを判定し、表示される場合はdata-original属性からsrc属性にURLのコピーが行われます。

性能向上の手段としてLazyLoadは用いられますが、動作からも分かる通りダウンロードを後回しにしているだけであるため、決してダウンロードサイズが小さくなるわけではありません。


ダミー画像について

また、初期表示時のダミー画像ですが、デフォルトではData URI schemeという、画像を文字列にしたもの設定されているためダミー画像はダウンロードすら発生しません。
Data URI scheme - Wikipedia
そのため、data-original属性のみ定義しておけば問題ありません。
もちろんsrc属性に好きな画像を設定することも出来ます。

<img data-original="https://example.com/img/original.jpg">

その他オプション

遅延読み込みが行われるタイミングなど、色々なオプションを設定することができます。
先程スクロールしたタイミングで読み込みが行われると書きましたが、オプションを設定することで別のタイミングにすることなどもできます。
オプションについては下記のサイトがわかりやすくて良い感じです。
cly7796.net

まとめ

  • jQuery Lazy Loadは必要なタイミングでsrc属性を書き換えることによって実現している
  • JavaScriptの記述だけでなく、imgタグも書き換える必要がある
  • 後で読み込みを行うだけであり、ダウンロードサイズが小さくなるわけではない

はてなブログでLazyLoadを使用するカスタマイズ

はてなブログでLazyLoadを使用する場合は下記の記事を参照してください。
www.viaggiolog.com