vue3使用IntersectionObserver属性结合 自定义指令 实现图片懒加载

预览

使用 intersectionObserver的目的就是一切从简，用着感觉一切正常

实现代码

为了项目全局使用，注册个全局自定义指令

1. 首先在main.js中

import { lazyImg } from './utils/directives'
app.directive('lazyImg', lazyImg)

2. lazyImg 代码部分
   为了每次图片显示时候有点动画效果，style添加了中transform属性

export const lazyImg = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    const observe = new IntersectionObserver((entry) =>{
      // entry是一个数组
      entry.forEach(item => {
        el.style.transition = 'all 1s ease'
        //item.isIntersecting为true时候就证明在窗口内，否则不在
        if(item.isIntersecting) {
          el.setAttribute('src', binding.value)
          el.style.transform = ''
          // observe.unobserve(el) //添加这个之后只执行一次
        } else {
          el.style.setProperty('transform', 'scale(0.9)')
        }
      })
    })
    // 把el绑定上去
    observe.observe(el)
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

3. 使用

<!-- item.img为变量时候 -->
<img v-lazyImg='item.img' alt="">
<!-- 或者 -->
<img v-lazyImg="'/src/assets/images/homeImages/home7/img2.png'" alt="">