Vue3 图片懒加载指令

图片懒加载是指当图片进入到可视区域时再加载图片。

期待如下使用

<template>
  <img src="xxx" v-lazy/>
</template>

监听图片出现在可视区域

用到的api：IntersectionObserver

具体实现

import defaultImg from '@/assets/images/default.png'

const lazy = {
  mounted(el, bindings) {
    // 保存图片地址
    const imgSrc = el.src
    // 再将地址置空
    el.src = ''
    // 创建IntersectionObserver实例
    const observer = new IntersectionObserver(
      ([{ isIntersecting }]) => {
        // 进入到可视区域
        if (isIntersecting) {
          // 加载后可以停止观察了
          observer.unobserve(el)
          el.src = imgSrc
          // 加载出错时显示默认图片
          el.onerror = () => {
            el.src = defaultImg
          }
        }
      }
    )
    // 开始观测
    observer.observe(el)
  }
}

export default {
  install(app) {
    app.directive('lazy', lazy)
  }
}

变体

如果期待这样使用：

<template>
  <img v-lazy="imgUrl"/>
</template>

imgUrl是图片地址。

那么需要做些更改：

...
if (isIntersecting) {
  ...
  el.src = bindings.value // 这里这样改
  ...
}
...