Lazy Loading Images with IntersectionObserver API
恥ずかしながら今まで画像のlazy loadingをまだ試したことがありませんでした。 lazy loadingに注目したきっかけは、HTML関係で足りてない知識を補強しようとフロントエンド向け面接対策を解いてた時に発見したからです。
ちなみにフロントエンドとして働こうと思ってる人はここで知識の補完のために参考にしてみてはいかがでしょうか。 GitHub - yangshun/front-end-interview-handbook: 🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore
なぜLazy Loading Image? 理由は２つあります。１つは、ユーザーがページを開いても文章などを最後まで読まずに離脱する場合があります。こういった場合にユーザーのメモリ、バッテリーの消費を防ぐためです。２つめは、軽量な画像を最初にロードさせることでレンダリングスピードを改善することが可能だからです。SEOやってる方ならこの方法で直帰率の改善要因としても考慮することができます。
Lazy Loadingの例
もしあなたがMediumの読者であれば、文章をスクロールしていく間にぼやけた画像が後からくっきりした画像に替わるのをみたことがあるかもしれません。
あれは、あらかじめにデータサイズの小さい画像をセットして置いて、JavaScriptでスクロール位置を検知させることで画像を貼り替えてるんですね。
簡単な例を作ってみました。
codepen.io
他にもresizeやsetIntervalを使った方法もあります。
ただこれらの方法だとパフォーマンスに関して２つ問題があります。
１つ目は、上のPENではremoveEventListenerを設定していますが、せずにリスリングさせると常に関し状態となってメモリ食います。
２つ目は、reflowしてしまいます。
これらの問題を解決するためにたくさんライブラリがリリースされていますが、今回は新しいブラウザAPI Intersection Observerがリリースされていたのでそれを試してみました。この記事作成時点で更新が6日前で更新が頻繁に行われているようです。
Intersection Observerを使用すると今まで必要だったハンドラーの設定や、何ピクセルでどのようなアクションをトリガーするといった詳細設定が不要になります。これらの煩雑な設定の代わりにするべきことは、画像が見えるようになった時点で何をしたいかを設定するだけです。 この画像が見えるようになった時点と言うのも「何％見えるようになった時点」にしたいかを0.0から1.0の間で設定可能です。
基本的な形は以下です。
const observer = new IntersectionObserver(callback, options);
optionsの条件を満たした時点でcallbackを発火させます。 optionsは以下の３つを指定します。
const options = { root: null, //default is null, but you can specify the ancestor of the target rootMargin: '0px', threshold: 1.0 // specify between 0.0 and 1.0 }
const callback = function(entries, observer) { entries.forEach(function(entry) { //Do something awesome }); };
observerの設定が完了したらあとは、あとは監視したいターゲットを設定するだけです。
const target = document.querySelectorAll("img") // targets that you want to make actions. observer.observe(target);
PENで簡単な例を作って練習してみました。
参考資料
