画像の遅延読み込みを行うJavaScriptライブラリ［Layzr.js］を紹介します。

ウェブページの読み込み時間短縮のために、ウィンドウの表示領域に入っていない要素や画像を非表示にしておいて、画面スクロールでウィンドウ内に入ってきたタイミングで表示切り替えを行います。

同機能のjQueryライブラリでは［Lazy Load］が有名ですが、今回紹介する［Layzr.js］ではローディングの時間短縮に直接は関係のないフェードイン表示機能などはカットして、最低限の機能だけを残してファイルサイズをより小さくしています。

より軽く、より早く。
遅延読み込みの本来の役割を重視した仕様になっています。

［Layzr.js］の使い方

比較的簡単なステップで導入可能です。

ファイルのダウンロード

まずは公式サイトからJavaScriptファイルをダウンロードします。

Layzr.js : http://callmecavs.github.io/layzr.js/

上記サイトの「Download」ボタンからzipファイルをダウンロード。
梱包されているファイルのうち、使用するのは「layzr.min.js」または「layzr.js」です。

スクリプトを読み込み

入手した「layzr.js」をサイトの適当な箇所で読み込みます。

<script src="layzr.js"></script>

ありがたいことにCDNでも配信されているので、より高速な環境を求めるなら以下のコードをご利用ください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>

上記コード内「1.4.3」の箇所は任意のバージョンを指定します。

bodyタグの最下部ではスクリプトを動かすためのコードを記述します。

<script>var layzr = new Layzr();</script>

画像にカスタムデータ属性を追加する

最後に、遅延読み込みしたい画像の「src」を「data-layzr」に変更します。

例えば次のような画像を表示するコードがあった場合……

<img src="example.png" alt="サンプル画像">

以下のように書き換えます。

<img data-layzr="example.png" alt="サンプル画像">

なおiframeにも遅延読み込みを効かせることができます。

<iframe data-layzr="iframe.html"></iframe>

オプション設定

ローディング画像の設定

「data-layer」属性と「src」属性を併記することで、遅延して読み込みが行なわれるまでの代替画像を設定できます。
通常はローディング中であることを示すサムネイル画像を指定しておくと便利です。

<img src="loading.gif" data-layzr="example.png">

Retinaディスプレイ対応

さらにカスタムデータ属性「data-layzr-retina」を追記することで、Retinaディスプレイ用の画像を出力することができます。

<img data-layzr="example.png" data-layzr-retina="example@2x.png">

「background-images」対応

カスタムデータ属性「data-layzr-bg」の追加ではCSSの「background-images」として出力可能。

<img data-layzr="example.png" data-layzr-bg="data-layzr-bg" width="300" height="200">

「data-layzr-bg」を使う際は必ず「width」と「height」属性を指定します。

非表示設定

カスタムデータ属性「data-layzr-bg」の追加では画像が非表示のままになります。

<img data-layzr="example.png" data-layzr-hidden="data-layzr-hidden">

オプションのデフォルト設定

以下JavaScriptでのデフォルト設定です。

<script>
var layzr = new Layzr({
	container: null,
	selector: '[data-layzr]',
	attr: 'data-layzr',
	retinaAttr: 'data-layzr-retina',
	bgAttr: 'data-layzr-bg',
	hiddenAttr: 'data-layzr-hidden',
	threshold: 0,
	callback: null
});
</script>

その他、オプションにはコールバック等も用意されています。
この辺りの詳細はGitHubをご覧ください。

GitHub : https://github.com/callmecavs/layzr.js