Intersection Observer Api 实现了图片懒加载和上划加载更多.

new Intersection Observer

• 目前有一个新的 API 叫 IntersectionObserver （交叉观察器） 可以自动"观察"元素是否可见，可见的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。Chrome 51+ 已经支持。

• 而传统的实现方法是，监听到scroll事件后，得到它对应于视口左上角的坐标，再判断是否在视口之内。由于scroll事件密集发生，计算量很大，容易造成性能问题

• IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

方法:

IntersectionObserver.observe()     使`IntersectionObserver`开始监听一个目标元素。
IntersectionObserver.unobserve()   使IntersectionObserver停止监听特定目标元素。
IntersectionObserver.disconnect()  使IntersectionObserver对象停止监听工作。
IntersectionObserver.takeRecords()  返回所有观察目标的IntersectionObserverEntry对象数组。

使用：这里我用了Vue 的 directives 和 IntersectionObserver 做的图片懒加载，跟着敲一遍就会了。

<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);
    },
  },

使用： 做了上划加载更多

 <!-- 加载中的结构 -->
    <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);
  },

s-z-h

标签：Observer,交叉,item,Api,IntersectionObserver,changes,监听,加载
来源： https://blog.csdn.net/qq_54753561/article/details/122820632