Intersection observerは、要素がウィンドウ内にあるかどうかを検出します.

前言

従来,検出要素はブラウザウィンドウ内で容易なことではなく,多くのソリューションでは正確な判断ができず,計算量がウェブサイトの性能を遅らせる可能性がある.しかし、多くのシーンでは、

ページがスクロールされると、画像またはその他のコンテンツをリロードします.

は、ページをめくる必要がなく、ユーザーがページをスクロールするときに直接より多くのコンテンツをロードする「無限スクロール可能」サイトを実現します.

は、広告収益を計算するために、その広告要素の露出状況を検出する.

は、ユーザが該当する領域にスクロールしたか否かに応じて、タスクまたはアニメーションの実行を柔軟に開始する.

通常、ウィンドウ内にあるかどうかを検出する原理

ブラウザスクロールイベントscrollを傍受し、各ターゲット要素に対してElementを実行する.getBoundingClientRect()メソッドは、ビューポートに対する要素のサイズとその位置を返します.この方法は、ウェブページ全体の左上隅の位置決め、およびブラウザの上部または左側からの距離を取得し、getBoundingClientRect、innerHeight などでウィンドウサイズを取得し、これによって減算してウィンドウ範囲内であるか否かを判断することができる.
具体的なコードは以下の通りです.https://codepen.io/raoenhui/pen/BGBYpX
その他の検出原理の多くは計算によって得られるが、ブラウザが独自の方法で要素がウィンドウ内にあるかどうかを検出する方法を紹介する.

新しい検出原理Intersection observer

Intersection observerでは、innerwidth がブラウザウィンドウに入るたびにコールバック関数をトリガーするコールバック関数を構成できます.
ソースアドレス:https://codepen.io/raoenhui/pen/XoVEjK

使用法

var options = {
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
};
var observer = new IntersectionObserver(callback, options);

パラメータ

options構成項目

rootターゲット要素.デフォルトではブラウザビューポートをroot

として使用します.

rootMargin root要素の外側距離.

thresholdしきい値.単一のnumberでもnumber配列でもよく、一般的には1をとる.

callbackコールバック関数

ケース

ソースアドレス:https://codepen.io/raoenhui/pen/xQKPaK
target要素とroot要素の交差がこの値に達するとIntersectionObserverが登録したコールバック関数が実行されます.target要素のroot要素での可視性が50%を超える場合にのみ、この属性値を0.5に指定できます.target要素をroot要素の可視度の25%ごとにコールバックしたい場合は、配列[0,0.25,0.5,0.75,1]を指定できます.デフォルト値は0です(root要素にtargetピクセルが1つ存在する限り、コールバック関数が実行されます).1.0の値は、targetがroot要素に完全に表示されたときにコールバックが実行されることを意味します.
プラグインtargetの怠惰なロードはこの方法を使用しています.
ソースアドレス:https://github.com/tuupola/jquery_lazyload

 this.observer = new IntersectionObserver(function(entries) {
                entries.forEach(function (entry) {
                    if (entry.intersectionRatio > 0) {
                        self.observer.unobserve(entry.target);
                        let src = entry.target.getAttribute(self.settings.src);
                        let srcset = entry.target.getAttribute(self.settings.srcset);
                        if ("img" === entry.target.tagName.toLowerCase()) {
                            if (src) {
                                entry.target.src = src;
                            }
                            if (srcset) {
                                entry.target.srcset = srcset;
                            }
                        } else {
                            entry.target.style.backgroundImage = "url(" + src + ")";
                        }
                    }
                });
            }, observerConfig);

互換性

互換性jquery_lazyloadは基本的にサポートされていますが、意外にもchromeはサポート性が悪いので、使っている仲間たちはこの点に注意してください.互換性は具体的には下図を見てください.

その他のリンク

公式リンク[Intersection Observer API

]
](https://developer.mozilla.org...

https://codepen.io/raoenhui/pen/BGBYpX

https://codepen.io/raoenhui/pen/XoVEjK

https://codepen.io/raoenhui/pen/xQKPaK

私の原文の住所https://raoenhui.github.io/js/2019/01/03/IntersectionObserver/

Happy coding .. :)