封装自定义指令实现图片懒加载 vue

使用js的原生API方法进行观察，判断是否进入了可视区内，进入以后再进行图片的src请求

是以new的形式声明一个对象，接收两个参数callback和options

const observer = new IntersectionObserver(callback[, options])

callback 被观察dom进入可视区离开可视区都会触发，返回一个回调函数，接收两个参数。

entries：一个对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。

observer：被调用的实例。

vue3，app.directive进行自定义指令封装注册

  // 图片懒加载指令
  app.directive("lazy", {
    // el是观察的dom，binding是给指令的值
    mounted(el, binding) {
      // 先new一个观察方法
      const observer = new IntersectionObserver(
        // isIntersecting是判断被观察的元素是否进入了可视区，进入的话就是true
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 进入可视区以后停止观察
            observer.unobserve(el);
            // 如果图片加载失败的话就给一个默认图片
            // el.onerror时监听图片加载失败的
            el.onerror = () => {
              el.src = defaultImg;
            };
            // 进入可视区以后给dom设置src进行亲求
            el.src = binding.value;
          }
        },
        //这个时options对象参数，内置的threshold，设置相交位置可设置为0，或者默认
        {
          threshold: 0.01,
        }
      );
      // 调用方法，传入dom
      observer.observe(el);
    },
  });

使用时需要去掉img的src，直接使用v-lazy,因为图片又src的话会直接进行图片亲求，上面等到进入可视区以后再进行给img的src赋值亲求

<img v-lazy="goods.picture" alt="" />