图片懒加载（Lazy Loading）是提升网页性能的重要技巧，尤其在 Vue.js 项目中，通过按需加载图片可显著优化首屏加载速度。以下是实现方案及注意事项：

1. 什么是图片懒加载？

通过延迟加载非关键图片，直到用户滚动到可视区域才加载，减少初始请求资源。
✅ 优点：

  • 节省带宽
  • 提升首屏渲染速度
  • 降低服务器压力

2. Vue.js 中的实现方式

原生 <img> + Intersection Observer

<img 
  src="/community/guides/vuejs-best-practices" 
  alt="示例" 
  ref="lazyImage" 
  class="lazy-image" 
/>

// 使用 Intersection Observer 监听图片进入视口
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '0px', threshold: 0.1 });

// 绑定到图片元素
document.querySelectorAll('.lazy-image').forEach(img => {
  observer.observe(img);
});

使用 Vue 组件库（如 Vite + Vue）

若使用 Vite 构建，可直接通过 loading="lazy" 属性实现： 

<img 
  src="https://cloud-image.ullrai.com/q/Vue_Image_Lazy_Loading/" 
  alt="Vue Lazy Loading" 
  loading="lazy" 
/>

3. 最佳实践

  • 📌 对非首屏图片添加 loading="lazy"
  • 📌 使用 Intersection Observer 处理动态内容
  • 📌 配合 srcset 实现响应式图片加载
  • 📌 对关键路径图片使用 prefetch 预加载

4. 扩展阅读

🔗 查看 Vue.js 性能优化全攻略
🔗 了解图片懒加载原理

Vue Image Lazy Loading Implementation