【Lazyload】lozad（ロザド）を使った遅延読み込みの簡単実装方法 #JavaScript

ページの表示速度改善のために画像や動画などのリソースをスクロールが達したタイミングで読み込み表示する遅延読み込み（Lazyload）を簡単に実装できるlozadの使い方について。

Lozadとは？

リソースの遅延読み込みを簡単に実装できる。
javascriptで書かれた軽量ライブラリ。
様々なタグに対応している（img, picture, iframe, videos, audios）
レスポンシブ画像や背景画像などにも対応。
画像の代替表示ができる（ダミーの軽量な画像を表示しておく）。

Lozadの使い方

1. lozadの読み込み

lozadの読み込み方法は２つある。

CDNを使う
パッケージをインストールする

1-1. CDNで読み込む

headタグ内に記述。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

1-2. パッケージをインストールする

パッケージをインストールし、読み込む。

インストール

$ npm install lozad

インストールはyarnでもできる。yarn add lozad

1-1-2. 読み込み

読み込み（ES6の場合）

import lozad from 'lozad'

const observer = lozad(); //デフォルトのクラス名はlazad。引数で好きなクラス名を指定できる。
observer.observe();

または

読み込み（CommonJSの場合）

var lozad = require('lozad')

const observer = lozad(); //デフォルトのクラス名はlazad。引数で好きなクラス名を指定できる。
observer.observe();

ES6とCommonJS（CJS）の歴史はこちらの記事がわかりやすいです。

1-1-3. HTMLにインポート

lozadを使用したいページの中で上記内容を読み込む。htmlの下部</body>の上に記述する。

<script src="ファイルパス"></script>

または直書き（おすすめしません、、）

<script>
import lozad from 'lozad'

const observer = lozad();
observer.observe();
</script>

以上でlozadを使う準備が完了。

2. タグに適用する

lozadの基本構文で使用する属性は2つ。

class="lozad" data-src="リソースのパス"

class="lozad" ※デフォルトのクラス名の場合
data-src="遅延読み込みするリソースのパス"
src="ダミー画像のパス"（なくてもいい）

遅延読み込みしたいリソースにクラス名lozadをつけ、読み込む画像をdata-srcに記述する。

もし、ページの初期ロードのタイミングでダミー画像（軽量な画像など）を表示しておきたい場合はsrcに記述する。

2-1. imageタグへの適用例

image.pngを読み込む場合

通常

<img src="image.png">

↓ 遅延読み込みの適用

lozad適用（これの記述でOK）

<img class="lozad" data-src="image.png">

↓ 初期にダミー画像 dummy.png を表示させておく場合

lozad適用（ダミー画像あり）

<img class="lozad" data-src="image.png" src="dummy.png">

2-2. pictureタグへの適用例

ダミー画像の有無で記述方法が異なる。

ダミー画像を設置しない場合
ダミー画像を設置する場合

(参考) pictureタグの基本的な使い方

2-2-1. ダミー画像を設置しない場合

sourceタグのどの条件にも当てはまらない場合に表示するimageタグを記述しない。

代わりに、pictureタグの中で画像を指定する。その際、最少の高さも指定しておく。

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="image.jpg" data-alt="">
    <source srcset="image-large.jpg" media="(min-width: 1280px)">
    <source srcset="image-middle.jpg" media="(min-width: 980px)">
    <source srcset="image-small.jpg" media="(min-width: 320px)">
</picture>

alt属性はdata-altに記述する。

実際に使う場合は、pictureタグに以下を追記して、imageタグにnoscriptタグ記述すれば、lozadの付け外しが簡単にできる。

class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt=""

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt="">
    <source srcset="image-large.jpg" media="(min-width: 1280px)">
    <noscript><img src="条件に当てはまらない時の画像パス" alt=""></noscript> -->
</picture>

2-2-2. ダミー画像を設置する場合

スクロールが達するまでダミーで表示しておく画像を設定する場合はimageタグに記述する。

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="条件に当てはまらない時の画像パス" data-alt="">
    <source srcset="image-large.jpg" media="(min-width: 1280px)">
    <img src="ダミー画像のパス">
</picture>

pictureタグの中のimageタグの用法が通常と異なることに注意が必要。

2-3. iframeタグへの適用例

imageタグへの適用と同じ。

<iframe data-src="リソースのパス" class="lozad"></iframe>

2-4. videoタグへの適用例

imageタグへの適用と同じ。

<video class="lozad" data-src="video/mov.mp4">

再生オプションを指定する場合は以下属性を追加する。

属性	内容
autoplay	自動再生
muted	デフォルトでミュート
loop	繰り返し
autoplay playsinline	スマホで勝手に全画面表示にしない
controls	コントロールパネルの表示
poster="画像パス"	動画を再生するまでに表示する画像
preload=”none”	事前読み込みしない

記述例

<video class="lozad" data-src="video/mov.mp4" autoplay muted loop playsinline controls data-poster="thumnail.jpg">

source属性を使う場合

source属性を使って環境に合わせて再生する動画を選ぶ場合は以下のようになる。（基本mp4再生できるので不要）

<video class="lozad" data-poster="images/backgrounds/video-poster.jpeg">
    <source data-src="video/mov_bbb.mp4" type="video/mp4">
    <source data-src="video/mov_bbb.ogg" type="video/ogg">
</video>

posterは動画を再生するまでに表示する画像。lozadを適用する場合はdata-posterとする。

2-5. 背景画像への適用例

<div class="lozad" data-background-image="image.png">
</div>

3. レスポンシブ対応方法

タグの中で画像幅に合わせて表示するリソースを指定することができる。data-srcsetを使う。

data-srcset="画像パス1 条件, 画像パス2 条件"

srcset属性はHTML5.1から追加された属性で、imageタグやpictureタグ内のsourceタグで使うことができる。

幅の指定はw（画面のピクセル幅）かx（デバイスピクセル比）かvw（画面幅に対する割合）で指定する。

実例

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

画面の幅が1000pxまではimage.pngを表示。
1001px~2000pxまではimage-2x.pngを表示。
どの条件にも当てはまらない（2001px以上）はimage-3x.pngを表示。

pictureタグを使って条件を指定して出し分けるのもあり。

4. デフォルトのクラス名(lazad)を変更する方法

デフォルトのクラス名lozadは変更することができる。

lozadを読み込んだjsファイルで、lozadの引数で好きなクラス名を指定する。

.js

import lozad from 'lozad'

const observer = lozad('.適用したいクラス名');
observer.observe();

実例

jsファイルの設定

lazyload.js

import lozad from 'lozad'

const observer = lozad('.is-lazyload');
observer.observe();

↓ htmlに適用

.html

<img class="is-lazyload" data-src="image.png">

<script src="public/js/lazyload.js">
</body>

以上。

【Lazyload】lozad（ロザド）を使った遅延読み込みの簡単実装方法

目次