vue3图片懒加载

图片懒加载

• src/direcitves/index.js
• 在main.js中引入该文件import directivePlugin from '@/direcitves'
• 在main.js中去全局注册插件createApp(App)..use(directivePlugin).mount('#app')
• 使用:已经全局注册,直接在img标签上加v-img-lazy="图片路径" ,并把img标签本身的src属性删除
• 在导入的defaultImg 后导入默认图片的路径

import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'  //默认加载图片
const plugin = {
  install (app) {
    console.log('指令插件', app)
    // app.directive() todo
    // 编写图片懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el:指令绑定的dom元素
        // binding: value  指令绑定的表达式的值
        console.log(el, binding.value)
        // 懒加载的逻辑：监听当前的img dom对象是否进入到视口区域  如果进入 就把图片的地址交给img 的src属性
        // 一旦src有了值就会自动发送http请求 获取图片资源
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting: 当前监听的元素是否成功进入到视口区域如果进来了就是true 否则就是false
            // 有了一个判断是否进入视口区域的条件 如果为true就发送请求
            if (isIntersecting) {
              // 错误处理
              el.onerror = function () {
                // 使用默认图片交给src
                el.src = defaultImg
              }
              el.src = binding.value
              stop()
            }
            // 监听处理不是只进行一次的 每次进入移出视口都会再次执行回调
          },
          // 0 - 1 数值越大代表 要求进入的面积越大才能触发回调函数
          { threshold: 0 }
        )
      }
    })
  }
}

export default plugin