自定义指令实现图片懒加载

第一步： 定义懒加载全局指令插件

         具体操作：新建一个defineDirective.js文件，封装好以下代码

import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  install (app) {
    console.log('确认插件已经注册好了', app)
    // 定义指令
    app.directive('img-lazy', {
      mounted (el, binding) {
        console.log(el, binding.value)

        // 核心思想：监控图片是否进入到视口区域 如果进来才发送图片请求
        // 技术点：1. 如何知道图片进入到视口了？ 2. 如何发送请求？
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 布尔值 true代表监听的元素已经进入了视口
            // false代表监听的元素离开了视口
            // 这个函数的监听很精确 不光可以横向 还可纵向
            
            if (isIntersecting === true) {
              // ? 当前图片进入视口了 赋值src正式发送图片请求
              el.src = binding.value
              // 优化 图片第一次请求回来后就停止监听
              stop()
            }
          },
          // threshold: 0 - 1 值越小 代表进入的视口的面积越小就会触发
          // 反之越大触发 0 img刚刚露头就触发  1 完全暴露在视口中才会触发
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin

第二步：在main.js中注册插件

        先引入，后注册

          

         注册代码：createApp(App).use(defineDirective)