图片懒加载-自定义指令

创建自定义指令

directives/index

<img v-imgLazy="url"/> // url=图片地址  v-imgLazy代替src

// =====================================
// 定制图片懒加载指令
import defaultImg from '@/assets/images/200.png' // 默认显示图片
import { useIntersectionObserver } from '@vueuse/core' // 引入监听是否进入视口

export default {
  // 拿到main.js中由createApp方法产出的app实例对象
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        // el: img的dom对象
        // binding.value: 图片url地址
        // 使用vueuse/core提供的监听api 对图片dom进行监听 正式进入视口才加载
        // img.src = url
        const { stop } = useIntersectionObserver(
          el, // 监听的目标元素
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaultImg
              }
              // 加载正式图片
              el.src = binding.value // <img v-imgLazy = "url"/>
              // stop(): 停止监听,防止重复调用请求
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0 }
        )
      }
    })
  }
}