画像を遅延読み込みするJavaScriptライブラリ「Layzr.js」の導入方法

今回は画像の遅延読み込みをするJavaScriptライブラリ「Layzr.js」の導入方法を紹介します。

Lazyr.jsは画像がウィンドウの表示領域に入っていない時は非表示にしておいて、スクロールで表示領域に入ったタイミングで画像を表示します。

遅延読み込みのプラグインとしてはLazy Loadもありますが、Lazyr.jsはフェードインの表示機能などをカットして最低限の機能だけを残したライブラリなので、ファイルサイズをより小さくすることができます。

 

Lazyr.jsの使い方

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

http://callmecavs.github.io/layzr.js/
ダウンロードしたファイルの中で必要なのはlazyr.min.jsのみです。

ではlazyr.jsを読み込みましょう。

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

 

また、SDNでも配布されているのでCDN経由で読み込む人は以下のコードをコピペします。

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

 

スクリプトを実行するには以下のコードをコピペするだけです。

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

 

導入はこれでokです。

 

画像に属性を指定する

遅延読み込みをしたい画像のsrc属性をdata-lazyrに置き換えます。src属性は書かなくて構いません。

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

 

これで遅延読み込みができます。

また、iframeにも遅延読み込みが可能なので、必要な場合は同じくdata-lazyr属性を追加しておきましょう。

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

 

Lazyr.jsのオプション

Lazyr.jsにはいくつか便利なオプションが用意されているので紹介します。

 

代替ローディング画面

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-imageで出力する

HTMLのimgではなく、CSSのbackground-imageで画像を出力したい場合はdata-layzr.bg属性を追加することで可能になります。

data-lazyr-bgを追加する時はHTMLでwidthとheightを指定するようにしてください。

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

 

画像を非表示にする

data-layzr-bg属性を追加すると画像が非表示のままになります。

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

 

その他のオプション設定

他にもオプションが色々設定できます。コールバックなどもあります。

以下はデフォルトのオプションです。

<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を見ればどんなオプションが指定できるのかがわかると思うので、詳しくは以下を参考にしてください。

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