图片懒加载

优化网络性能，当图片进入可视区时加载图片资源

原理：当图片进入可视区的时候，将图片真实的地址给src

步骤：

1.以插件的方式，全局注册指令插件

在 src/directives/index.js 中，复制以下代码：

import { useIntersectionObserver } from '@vueuse/core'
// 默认图片（当有的图片加载失败时生效）
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    // 自定义全局指令
    app.directive('imgLazy', {
      // 当DOM挂载完成 el:自定义指令的那个对象，binding是通过自定义指令传过来的数据
      mounted (el, binding) {
        // 当图片进入可视区，加载图片
        const { stop } = useIntersectionObserver(
          // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
          el,
          // isIntersecting 是否进入可视区域，true是进入 false是移出
          // observerElement 被观察的dom
          ([{ isIntersecting }]) => {
            // 在此处可根据isIntersecting来判断，然后做业务
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              stop()
            }
          }
        )
      }
    })
  }
}

2. main.js 中注册插件

import directivePlugin from '@/directives'
createApp(App).use(componentPlugin).use(directivePlugin).use(store).use(router).mount('#app')

3.测试

 <img v-imgLazy="图片路径" alt="" />