Intersection ObserverAPIのモジュール化

2020.06.03

・はじめに

記事ではIntersection ObserverAPIでの「画像の遅延ロード」を色んな案件で使用できるようにモジュール化しました。

・Intersection ObserverAPIとは

Intersection ObserverAPI とはIntersection=「交点」Observer=「監視」という意味であり、scrollイベントを使用せずに指定した要素とviewportとの交差点を監視し、パフォーマンスへ悪影響を与えること無くイベントを発火させるAPIです。
これを使用すると「画像の遅延ロード」を簡単に実装することができます。
今までは、ブラウザを開いた瞬間にサイトで使用している画像を全て読み込まないとローディングが終わりませんでした。しかし、画像の遅延ロードを組み込むことでローディングが短時間で終わります。なので、画像を大量に使用したサイトに活用すればサイトのパフォーマンス改善となります。

・方法

やり方としてはsrcにdummy画像を置いておき、data-srcに本番用の画像を置いておきます。画像はクローンし初期状態はdummy画像が二枚重なっている状態にしておきます。初期のローディングでは容量の軽いdummy画像を読み込ませておいて、後からIntersection ObserverAPIを使い本番画像をsrcに移動させ遅延ロードさせるという仕組みにしました。optionで画面外ローディング・画面内ローディングを自由に設定できます。今回は画面内ローディングにして、ローディング時にアニメーションをつけてみました。

・モジュール化

モジュール化するにあたってディレクトリの構造は以下のようにしました。ファイル名は自由につけてしまって構いませんので、好きな名前に変更してください。

dummy.jpgとmain.jpgは以下のような画像を用意しました。

■html・css

html・cssは以下のようになります。

 

[index.html]

 

現在Intersection Observerが未対応のブラウザに対してはPolyfillを使って対応します。以下のコードでPolyfillを読み込んでいます。

<script src=”https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver”></script>

Polyfillは古いブラウザーに欠けている部分、新しいブラウザーでも足りない機能の穴を埋める際に使用します。対応ブラウザを調べる際にはCan I useというサイトが便利です。

https://caniuse.com/

画像に関してはdummy画像をsrcにmain画像をdata-srcにセットしておきます。

 

[style.css]

cssはposition: relative;以外、見た目上中央揃えになるように設定しているだけなのでここは適宜変更してください。


■js・モジュール内

まずはinit関数内で、モジュール化の準備としてクラス名の設定と変数の設定を行います。今回変数にしておきたい部分は以下の4つです。

変数名 意味
$o 遅延ロードさせたいオブジェクト
rootMargi viewportと交差する何px前、もしくは交差後何pxにイベントを呼び出したい場合に指定
threshold target (画像)がどのくらいの割合で見えたらイベントを発火させるか
iTime アニメーションの秒数

 

まずset関数内で後に出てくる関数をここで呼び出しておきます。

[imgload.js]

 

次にsetObject関数内で画像をクローンします。

 

2つのimgタグが重なっている状態にする必要があるのでsetState関数とsetImgState関数内で.css()を使って調整します。

今回は画像が重なるようにしたいので、positionを使って重ねています。画像を囲っているdivにposition: relative;をかけています。dummy画像は小さくして見えないようにしていますが、念のためsetImgState関数内でopacityを0にしておきます。

 

intersection関数内でIntersection ObserverAPIでの遅延ロードの処理を書いていきます。

 

setAnim関数でフェードインアニメーションの処理を書き、showAnim関数内でsetAnim関数を呼び出します。ここでフェードインアニメーションの設定をします。

 

 

 

■js・モジュール外

manager.jsでモジュールをセットします。imgload.js内で設定した変数内($o, rootMargin, threshold, iTime)に値を入れます。rootMarginとthresholdに関してはどちらかのみ使いたい場合でも、両方モジュール内で設定しておかないとエラーが出てしまいます。なので使わない方に0の値を入れておいてください。

[manager.js]

 

実装した結果は以下のようになります。

dummy画像はopacity:0にしているので表示されずに、main画像がフェードインしながら表示されます。

 

・まとめ

以上でIntersection ObserverAPIのモジュール化 の説明は終了です。画面内でdummy画像が本番画像にフェードインしながら差替わるように実装しました。
画像が多くてサイトが重くなってしまうかも、という際に参考にしてみてください。

・使用コード

[imgload.js]