vue3.0实现图片懒加载

当图片进入可视区域内去加载图片，封装成指令。

图片懒加载原理：不能把图片地址绑定在src上，先存储图片的绑定在自定义指令v-xx上，当图片进入可视区后，再将图片的地址设置给图片元素

借助@vueuse/core库的IntersectionObserver webAPI的使用参考：IntersectionObserver(opens new window)

// 创建观察对象实例
const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器，默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例

// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom

基于vue3.0和IntersectionObserver封装懒加载指令

src/library/index.js

export default {
  install (app) {
   defineDirective(app)
  }
}

//1.定义图片懒加载指令v-lazy
const defineDirective = (app) => {
  // 图片懒加载指令，使用时是v-lazy
  app.directive("lazy", {
    //mounted 组件挂在完毕后监听
    //el当前绑定的dom，binding：绑定在指令上的值
    mounted(el, binding) {
    //2.创建一个观察者对象，用来观察当前使用指令的元素
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          //当用v-lazy绑定的dom进入可视区
          if (isIntersecting) {
            observer.unobserve(el); //停止观察
            //处理图片加载出错 显示默认图片
            el.onerror = () => {
              el.src = defaultImg;
            };
            //3.把指令的值赋给src属性
            el.src = binding.value;
          }
        },
        {
          threshold: 0.01,
        }
      );
      observer.observe(el);
    },
  });
}

使用指令：

xxx.vue

<img alt="" :src="cate.picture">    // 未绑定图片懒加载指令
<img alt="" v-lazy="cate.picture">  // 绑定懒加载只需要用v-lazy代替：src