More than 1 year has passed since last update.

Layzr.jsを使うと画像やiframeの遅延表示をさせることができます。つまり重たい画像やiframeがスクロールによって必要になった時に、初めてローディングされるため、ページの読み込み速度を上げることができます。

準備編

Githubからminifyされたやつを落として、適当に入れます。今回はjsディレクトリに入れておきましょう。必ず、layzrを呼び出すより前に、読み込みが行われるようにしてください。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <script src="/js/layzr.min.js"></script>
  <script src="/js/application.js"></script>
</head>
<body>
  <!-- 何か -->
</body>
</html>

続いてjs側の設定です。

js/application.js
window.addEventListener("load", () => {
  const instance = Layzr();
  instance.update().handlers(true);
});

このupdateメソッドは、遅延表示を行うDOMを取得するメソッドです(遅延表示が必要なDOMが後から増えるような時には、都度呼び出しましょう)。
handlersメソッドは、画面のスクロールやリサイズによって画像が必要となった時に、自動的に読み込みを行うかを設定するメソッドです。

これで準備は完璧です!

使い方1 - とりあえず遅延表示 -

imgタグやiframeタグのsrc属性をdata-normal属性に変えます。それだけです。

index.html
<img data-set="画像のURL">

これで動かしてみましょう。画面をスクロールして画像まで辿りつくと読み込みが始まるはずです。スクロールやリサイズが読み込みのトリガーになります。
なので、スクロールなしでページが完結してしまう時には使えません。(そもそも遅延表示いらないね)
またスクロールがあるページでも最初から見える画像に関してもスクロールしないと読み込まれません。こちらについては後ほど対処法を説明します。

使い方2 - ローディング中のイメージ -

重い画像を読み込んでいる時に真っ白なままでは物寂しいと思います。そんな時は、src属性を設定して読み込み中に表示させておく画像を設定しておきましょう!

index.html
<img src="読み込み中の画像のURL" data-set="画像のURL">

読み込み中の画像は軽めのものにしておきましょう!

使い方3 - 画像が始めから見えてしまう時 -

Layzr.jsは、スクロールやリサイズがトリガーになっているのでスクロールせずに見えてしまう画像が始め見えないという現象が発生しています。最初から、data-normalを設定しなければいいじゃんという話なのですが、サーバ側も絡んできて検索結果の一覧を表示させる・・・とかなった場合には、そうもいきません。(後レスポンシブなサイトなんかも画面サイズによってどこまで見えるかという問題もある)

そこでLayzr.jsにはcheckメソッドという画像が必要になっているかを判断して、必要なら読み込みを行うメソッドが存在しています。
js/application.jsをこんな感じにするとできます。

js/application.js
window.addEventListener("load", () => {
  const instance = Layzr();
  instance.update().check().handlers(true); //check()が増えた
});

使い方4 - 読み込みのタイミングを変える -

デフォルトの状態では、画像がビューポート上に現れてからの読み込みとなりますが、必要に応じて変えることができます。

js/application.js
window.addEventListener("load", () => {
  const instance = Layzr({threshold: 10}); //thresholdを追加
  instance.update().handlers(true);
});

thresholdプロパティを追加することで読み込みのタイミングをずらせます。単位はvhです(viewport height。ビューポートに対する高さの割合)。
正の値にすれば読み込みを早く、負なら遅くできます。

まとめ

画像が多くて読み込みが遅いページは、画像の遅延表示を行うことで改善を行うことができます。その時に便利なのが、このLayzr.jsです。
あとrailsの場合だとlayzr-railsというgemがあり、これを使うとimage_tagから遅延表示が行えます。