vue3自定义指令-v-lazy

const lazyLoad = {
  install(app, options) {
    //默认图
    let defaultSrc = options.default || ''
    console.log(options)
    app.directive('lazy', {
      beforeMount(el, binding) {
        lazyLoad.init(el, binding.value, defaultSrc)
      },
      mounted(el) {
        // 兼容处理
        if ('IntersectionObserver' in window) {
          lazyLoad.observe(el)
        }
      }
    })
  },
  //初始化
  init(el, val, def) {
    //data-src 存储真实src
    el.setAttribute('data-src', val)
    //将src设为默认图
    el.setAttribute('src', def)
  },
  //监听
  observe(el) {
    let io = new IntersectionObserver(entries => {
      let realSrc = el.dataset.src
      if (entries[0].isIntersecting) {
        if (realSrc) {
          el.src = realSrc
          el.removeAttribute('data-src')
        }
      }
    })
    io.observe(el)
  }

}

export default lazyLoad

main.js

//图片懒加载
import lazyLoad from './directive/lazy-img/index'
app.use(lazyLoad, {
  default: require('./assets/img/loading.jpg')
})

使用

//1.assets里的图片
<img v-lazy="require('@/assets/img/wecom.png')" alt="" />
//2.http图片
<img v-lazy="'https://minioprod.pharmbrain.com/techpool/doctor/56831675233544_.pic.jpg'" class="img" />
//3.变量形式
<img v-lazy="item.url" class="img" />

这段代码实现了一个图片懒加载的自定义指令 lazy，并使用 Vue 3 的指令 API 进行注册。懒加载是一种优化技术，它延迟加载页面上的图片，只有当图片出现在用户的视口内时才加载，以提高页面加载性能。

让我们逐步解读这段代码：

1. lazyLoad 对象是一个自定义指令对象，用于注册 lazy 指令。
2. install 方法是自定义指令的入口，它接收两个参数：app 和 options。app 是 Vue 应用的实例，options 是一个可选的配置对象，用于传递指令的默认选项。在这里，我们从 options 中获取了默认图片的地址 defaultSrc。
3. 在 beforeMount 钩子中，调用 lazyLoad.init 方法，初始化元素的 data-src 和 src 属性。data-src 属性用于存储真实的图片地址（待加载的图片地址），src 属性用于将默认图片的地址设为元素的初始值。
4. 在 mounted 钩子中，进行兼容性处理，检查浏览器是否支持 IntersectionObserver API。IntersectionObserver 是一种用于监测元素是否进入视口的API，它可以帮助我们判断图片是否可见，从而触发图片的加载。
5. 在 init 方法中，将真实的图片地址 val 存储在 data-src 属性中，并将默认图片地址 def 设置为元素的 src 属性值，这样默认图片将显示在元素上，直到图片需要加载时才切换到真实图片。
6. 在 observe 方法中，创建一个 IntersectionObserver 实例 io，用于监测元素是否进入视口。
7. IntersectionObserver 的回调函数在视口状态发生变化时执行。当图片元素进入视口 (entries[0].isIntersecting 为 true) 时，检查元素上是否设置了真实图片地址 realSrc，如果存在，则将 realSrc 设置为元素的 src 属性值，同时移除 data-src 属性，以便图片正确加载并显示真实的图片。

总结：这段代码实现了一个图片懒加载的 Vue 自定义指令，它将元素的默认图片设置为 defaultSrc，然后监听元素是否进入视口，当元素进入视口时，将元素的 src 属性切换为真实的图片地址，以实现图片的懒加载效果。