今回は遅延読み込みに便利なプラグインのご紹介です。遅延読み込み、スピードテスト的に言うとオフスクリーン画像の読み込みを手助けしてくれます。こちらのプラグインはIntersectionObserver APIを使用しているおかげで非常に軽量化出来ているとのことです。
用意するもの
コアファイルは公式サイトからダウンロード、npm、cdnと好きな手段で導入することができます。
npm install --save lozad
もしくは、
yarn add lozad
CDNは下記にあるそうです。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
読み込むものはこれだけで大丈夫です。
基本的な使い方
基本的な使い方は効果を与えたいDOM要素に対して指定のclassを追加するだけで実装出来ます。
HTMLはこう。
<img class="lozad" data-src="photo.jpg" />
JavaScriptはこんな感じです。
const observer = lozad();
observer.observe();
classについてはオプションで指定しない限りはデフォルトで「.lozad」となっています。この指定で.lozadが付いた要素に対して遅延読み込みが効く仕様になります。
次にオプションをざっくり説明します。
const observer = lozad('.originalclass', { // オリジナルのclassを指定したい場合
rootMargin: '10px', // cssの記述と同じで、これは読み込み位置を上下左右10px手前にしている
threshold: [0.1,0.2,0.3] // 読み込みタイミング1つだけでなく、10%、20%と表示領域が変わった場合にもコールバックを発生させるためのオプション
});
observer.observe();
IntersectionObserverに備わっているオプションの2つを設定することが出来ます。thresholdがちょっとわかりづらいですが、読み込みに伴ってclass付け替えるとか程度なら設定の必要はないんじゃないかと思います。
他に読み込み開始や、読み込み完了に独自のイベントをつけることも出来ます。
lozad('.originalclass', {
load: function(el) {
console.log('読み込み開始');
}
});
lozad('.originalclass', {
loaded: function(el) {
console.log('読み込み完了');
}
});
基本的な使い方はざっとこんな感じです。この他にも公式サイトには背景画像の場合や、videoの場合など豊富な用途が書かれているので気になる方はそちらをご参照ください。
JavaScript コードレシピ集
