性能优化之图片懒加载指令实现

前言

  图片懒加载的作用

• 提高加载速度：通过减少首次加载时的数据传输量，加快了页面呈现的速度。
• 节省带宽：只加载用户可见的内容，减少了不必要的网络请求，节省了带宽成本。
• 提升用户体验：页面响应更快，用户无需等待长时间即可开始浏览，增强了整体的浏览体验。

 在vue3中使用图片懒加载

1. 封装全局指令

// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

 

2. 在main.js中注册全局指令

// 全局指令注册
import { directivePlugin } from '@/directives'
app.use(directivePlugin)

3. 图片懒加载实例

 <!-- 指令替换 -->
        <img v-img-lazy="img" />