序文
vant のソースコードを見てみると、IntersectionObserver 属性が使われているのですが、無知なので何のことか分かりませんが、百度さん、本当に良いですね！
IntersectionObserver は主に要素の可視性を監視するために使用されます。これは、可視性を判断するためにスクロール イベントをグローバルに監視する従来の方法よりもパフォーマンスと利便性の点ではるかに優れています。API は比較的新しいため、互換性の問題があります。幸いなことに、互換性のあるPolyfillがすでに存在します。その基本的な紹介と使用方法は、Polyfill の対応する Web サイトで確認できます。
使用するシーン
1. 画像の遅延読み込み
リスニングスクロール方式（旧）：
window.addEventListener('scroll', lazyload);
function lazyload() {
const imgs = document.querySelector('.img');
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
imgs.forEach((img) => {
const imgOffsetH = util.getPosition(img).top;
// 距离页面顶部的距离 <= 视窗高 + 往上滚进去的距离
if(imgOffsetH <= innerHeight + scrollTop) {
img.src = img.getAttribute('data-src');
}
})
}
説明: ページの上部からの距離 <= ウィンドウの高さ + 上にスクロールする距離、つまり、画像は表示されている場合にのみロードされるため、パフォーマンスが低下します。
IntersectionObserver は要素の可視性を監視します (新規):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((img) => {
if(!img.isIntersecting) return;
img.src = img.getAttribute('data-src');
io.unobserve(img);
})
}, {
//即滚动到距离底部50px时开始算交互区
rootMargin:'0px 0px 50px 0px'
})
imgs.forEach((img) => {
io.observe(img);
})
説明: ネイティブ関数。パフォーマンスの損失は発生しません。rootMargin のしきい値は直感的です。
2. スクロールページネーション
リスニングスクロール方式（旧）：
window.addEventListener('scroll', () => {
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
const scrollHeight = util.scrollHeight();
// 滚动到距离底部50px
if(innerHeight + scrollTop >= scrollHeight - 50) {
loadMore();
}
});
注: ウィンドウの高さ + 上にスクロールする距離 >= ページの高さは、新しいページを読み込むための条件として使用され、パフォーマンスが低下します。
IntersectionObserver は要素の可視性を監視します (新規):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((entry) => {
if(!entry.isIntersecting) return;
loadMore();
})
}, {
rootMargin:'0px 0px 50px 0px'
})
//监听最底部的loadmore是否出现
const lMore = document.querySelector('.load-more');
io.observe(lMore);
説明: パフォーマンスはさらに良くなり、ウィンドウの高さ、ロールインする距離などを毎回判断する必要がなくなりました。