はじめに

jQuery を使わずに Lazy Load できる ApoorvSaxena/lozad.js の使い方を整理した。

TL;DR

  • <img class="lozad" src="dummy" data-src="image"> のように指定
    • class="lozad" を追加
    • data-src に Lazy Load 対象画像、src にダミー画像を設定
  • lozad().observe() を実行して Lazy Load 起動(監視処理の起動)
  • IntersectionObserver を使っているので SEO 的にも良い(らしい)
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. Intersection Observer とは
    2. lozad.js
      1. 使い方
      2. Tips
  5. まとめ
  6. 参考文献

環境・条件

lozad.js, intersection-observer.js は CDN(JSDELIVR) を利用。

詳細

Intersection Observer とは

要素同士の交差を監視することができる API。

分かりやすい例だと、(lozad.js でも使われているように)「表示画面」と「画像」の交差有無を検出できる。「表示画面」と「画像」の交差有無とは、言い換えると「画像が画面に表示されているかどうか」ということ。

lozad.js

従来の Lazy Load は scroll イベントにイベントリスナーを仕掛けて検出するという方法だったが、この方法だとイベントが大量に発火するため、パフォーマンス的な問題がある。

lozad.js は、scroll イベントは使わずに Intersection Observer で Lazy Load を実現している。

使い方

事前準備

手っ取り早いのは CDN から読み込む方法。

InterSectionObserver は未対応のブラウザがあるので、polyfill である intersection-observer も合わせて読み込む。

※参考: IntersectionObserver - Can I use

1
2
3
4
<head>
  <script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js">
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js">
</head>
画像表示箇所の設定

やることは下記

  • class="lozad" の付与(※独自クラスも使用可能)
  • data-src="/path/to/image" で Lazy Load させたい画像を指定
    • src="/path/to/dummy" を指定すると Lazy Load 前に表示しておく画像を指定できる
1
2
3
<img src="/path/to/image">
<!-- ↑を↓のようにする -->
<img class="lozad" src="/path/to/dummy" data-src="/path/to/image">
lozad.js の実行

lozad.js のインスタンスを生成して observe() を実行するだけ。

1
2
const observer = lozad();
observer.observe();

Tips

独自クラスを使う

myLazyLoad のような独自クラスを対象にしたい場合。

1
<img class="myLazyLoad" src="/path/to/dummy" data-src="/path/to/image">

lozad.js のインスタンス生成時にクラス名を指定する。

1
2
const observer = lozad('.myLazyLoad');
observer.observe();
Lazy Load のタイミング変更

lozad.js のインスタンス生成時の第2引数に IntersectionObserver のオプションが指定できる。

デフォルトでは指定要素が全て画面上に現れた時(対象要素の bottom まで表示された時)が、Lazy Load の発火タイミングになっている模様。rootMargin を指定することで、発火タイミングを指定数値分だけ調整できる。

以下例だとデフォルトよりも 100px 分速く Lazy Load が行われる。

1
2
3
4
5
const options = {
  rootMargin: '100px 0';
};
const observer = lozad('.lozad', options);
observer.observe();
img タグ以外で使う

<img src=""> 以外にも使うことができる。

srcset

1
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w" />

CSS の background-image

1
2
3
4
5
6
7
8
<!-- 単一画像 -->
<div class="lozad" data-background-image="image.png"></div>

<!-- 複数画像 -->
<div class="lozad" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image"></div>

<!-- srcset -->
<div class="lozad" data-background-image-set="url('photo.jpg') 1x, url('photo@2x.jpg') 2x"></div>

video

1
2
3
<video data-poster="images/backgrounds/video-poster.jpeg">
    <source data-src="video/mov_bbb.mp4" type="video/mp4">
</video>

iframe

1
<iframe data-src="embed.html" class="lozad"></iframe>

まとめ

  • <img class="lozad" src="dummy" data-src="image"> のように指定
    • class="lozad" を追加
    • data-src に Lazy Load 対象画像、src にダミー画像を設定
  • lozad().observe() を実行して Lazy Load 起動(監視処理の起動)
  • IntersectionObserver を使っているので SEO 的にも良い(らしい)

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list