Javascript

Intersection Observerで処理が実行されるタイミングについて

Intersection Observerに登録した処理が実行されるタイミングについて

  • ターゲットの取得
  • オブザーバーの設定
  • ターゲットの監視
  • 処理の実行タイミング

ターゲットの取得

前回までで要素の配置やJavaScriptを書くためのmain.jsを作成しました。

今回は実際にmain.jsにJavaScriptを書いていきましょう。

まずはターゲットとなる要素を取得していきます今回は画像と交差したときに処理をしていくのでターゲットは画像であるimgです。

const target = document.querySelector('img');

としてtargetにimgを代入してあげます。

オブザーバーの設定

次にインターセクションオブザーバーのインスタンスを作っていきます。

const observer = new IntersectionObserver();

としてあげましょう。

ターゲットの監視

次にオブザーバーのobserver()メソッドを使って先程作ったtargetを監視してあげましょう。

observer.observe(target);

と書いていきます。

後はtargetがルートに交差したときの処理をインスタンスの中に書いていきましょう。

const observer = new IntersectionObserver(callback);

と書き変えて定義も書いていきます。

Callbackが呼ばれたらコンソールにfiredと表示させたいので

  function callback() {

    console.log('fired!');

  }

というように書いていきます。

処理の実行タイミング

ここまで書いていくとルートに交差されたらfired!と表示されます。

この時、処理のタイミングですが監視が始まった時と、初期設定の場合、targetがrootに0％交差した時です。

つまり、ページを開いたタイミングで監視が始まり、画像が現れたタイミングで監視、画像が画面から消えたタイミングで監視という処理が行われます。

以上

-Javascript