Vue图片懒加载：从原理到实战优化

懒加载技术概述

懒加载是一种延迟加载非关键资源的技术，当图片进入可视区域时才进行加载。这种技术能显著减少初始页面加载时间，降低带宽消耗，提升用户体验。

核心优势

• 减少首屏加载时间
• 节省不必要的网络请求
• 提升页面滚动流畅度
• 适用于移动端和低网速环境

Vue2实现方案

方案一：vue-lazyload插件

安装插件后全局配置占位图和错误图，通过v-lazy指令替换常规的src属性：

// main.js配置
Vue.use(VueLazyload, {
  loading: 'loading-spinner.gif',
  error: 'error-icon.png'
})

<!-- 组件使用 -->
<img v-lazy="dynamicImageURL" width="300">

方案二：原生API实现

通过自定义指令封装Intersection Observer：

Vue.directive('lazyload', {
  inserted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        el.src = binding.value
        observer.disconnect()
      }
    })
    observer.observe(el)
  }
})

Vue3实现方案

方案一：Composition API实现

使用VueUse提供的观察器工具：

import { useIntersectionObserver } from '@vueuse/core'

const imgRef = ref(null)
const realSrc = ref('placeholder.jpg')

useIntersectionObserver(imgRef, ([{ isIntersecting }]) => {
  if (isIntersecting) realSrc.value = 'actual-image.jpg'
})

方案二：专用组件库

安装配置更简单的专用库：

npm install lazy-load-images-vue3

import { createLazyLoad } from 'lazy-load-images-vue3'

app.use(createLazyLoad({
  // 配置选项
}))

性能优化要点

• 设置合适的rootMargin提前触发加载
• 添加加载动画避免布局跳动
• 实现错误重试机制
• 对WebP等现代格式做兼容处理
• 配合路由预加载策略

框架差异对比

特性	Vue2方案	Vue3方案
API形式	选项式API	组合式API
观察器实现	需手动polyfill	内置支持
类型支持	需额外声明	完善TS支持
打包体积	稍大	可Tree Shaking

兼容性处理

对于不支持Intersection Observer的浏览器（如IE11），需要添加polyfill：

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

调试建议

1. Chrome DevTools的Network面板筛选img请求
2. 使用Lighthouse检测懒加载效果
3. 测试快速滚动时的加载表现
4. 检查移动端触摸延迟问题

以上方案均可根据项目需求调整触发阈值、加载过渡效果等参数，建议通过实际性能测试选择最适合的方案。