新しい交差点オブザーバー
-
現在、要素が表示されているかどうかを自動的に「監視」できるIntersectionObserver（交差オブザーバー）と呼ばれる新しいAPIがあります。可視性の本質は、ターゲット要素とビューポートが交差領域を生成することであるため、このAPIは「交差オブザーバー」と呼ばれます。 "。Chrome51+はすでにサポートされています。
-
scroll従来の実装方法は、イベントをリッスンした後、ビューポートの左上隅に対応する座標を取得し、それがビューポート内にあるかどうかを判断することです。イベントの集中的な発生と大量の計算により、パフォーマンスの問題が発生しやすくなりますscroll -
IntersectionObserverが作成されると、その構成は変更できないため、特定のオブザーバーオブジェクトは、表示領域の特定の変更をリッスンするためにのみ使用できます。ただし、同じオブザーバーオブジェクトに複数のターゲット要素を構成できます。
-
IntersectionObserverは、ブラウザーによってネイティブに提供されるコンストラクターであり、2つのパラメーターを受け入れます。callbackは、可視性が変更されたときのコールバック関数であり、optionは構成オブジェクトです（このパラメーターはオプションです）。コンストラクターの戻り値はオブザーバーインスタンスです。インスタンスのobserveメソッドは、監視するDOMノードを指定できます。
方法：
IntersectionObserver.observe() 使`IntersectionObserver`开始监听一个目标元素。
IntersectionObserver.unobserve() 使IntersectionObserver停止监听特定目标元素。
IntersectionObserver.disconnect() 使IntersectionObserver对象停止监听工作。
IntersectionObserver.takeRecords() 返回所有观察目标的IntersectionObserverEntry对象数组。使用：ここでは、VueのディレクティブとIntersectionObserverを使用して、画像の遅延読み込みを実行します。これを1回実行するだけです。
<div class="list" v-for="(item, index) in tapList" :key="index">
<!-- src 替换为 v-lazy -->
<img v-lazy="item.author.avatar_url" alt />
</div>
// 图片的懒加载
directives: {
// bing 是一个对象 里面有 自定义指定传过来的值 也就是 v-lazy="item.author.avatar_url" 等号里的数据
// el 可以拿到当前的元素
lazy(el, bing) {
// new IntersectionObserver 创建我们的交叉观察器
let ob = new IntersectionObserver(
(changes) => {
// changes 是个数组包含所有的监听对象和视口的交叉位置
changes.forEach((item) => {
if (item.isIntersecting) { // item.isIntersecting == 1 为 true
// 当先监听的对象 符合条件
let lazyImg = item.target; // 拿到当前监听的盒子
// 改变src
el.src = bing.value;
// 加载完移除监听
ob.unobserve(lazyImg);
}
});
},
{
// threshold 控制交叉状态在什么养的情况下触发上面的回调
threshold: [1], // 0 一露头 0.5 露一半 1 完全出现
}
);
// 使`IntersectionObserver`开始监听一个目标元素。
ob.observe(el);
},
},使用：上にスワイプしてさらにロードします
- 無限にスクロールする場合は、ページの下部にフッターバー（別名センチネル）を配置するのが最適です。フッターバーが表示されると、ユーザーがページの下部に到達し、フッターバーの前に新しいアイテムが読み込まれたことを意味します。これの利点は、メソッドを再度呼び出す必要がなく
observe()、既存のメソッドを引き続きIntersectionObserver使用できることです。
<!-- 加载中的结构 -->
<div v-show="tapList.length" ref="loading" class="loading">加载中...</div>
<!-- 仅供参考 -->
mounted() {
let loading = this.$refs.loading;
let ob = new IntersectionObserver(
(changes) => {
// changes 包含所有的监听对象和视口的交叉位置
changes.forEach((item) => {
// this.tapList.length > 0 防止二次渲染
if (item.isIntersecting && this.tapList.length > 0) {
// 当先监听的对象 符合条件
let lazyImg = item.target; // 当前监听的盒子
this.params.page++;
if (this.tapList.length >= this.total) {
console.log("到底了");
loading.innerHTML = "到底了兄弟";
return;
}
this.getTapListFn();
console.log(this.total);
}
});
},
{
// threshold 门阀 for手 控制交叉状态在什么养的情况下触发上面的回调
threshold: [0], // 0 一露头 0.5 露一半 1 完全出现
}
);
ob.observe(loading);
},IntersectionObserverAPIの使用に関するRuanYifengのチュートリアルを詳細にフォローしてください -RuanYifengのウェブログ
szh