Vue3 如何实现图片懒加载？其实一个 Intersection Observer 就搞定了

大家好，在当今图片密集的网络环境中，优化图片加载已成为前端开发的重要任务。今天我们分享一下怎么使用 Vue3 实现图片的懒加载功能。

什么是图片懒加载？

假如你打开一个有大量图片的页面，如果所有图片同时加载，会导致页面卡顿、流量浪费，特别是对于那些需要滚动才能看到的图片。

懒加载技术就是解决这个问题的方案，只有当图片进入或即将进入可视区域的时候，才加载它们。

效果预览：

完整示例代码可在文末获取

实现原理

我们的Vue3懒加载实现基于以下核心技术：

1. Intersection Observer API

这是现代浏览器提供的强大API，可以高效监听元素是否进入可视区域，而无需频繁计算元素位置，性能远优于传统的滚动监听方式。

1// 创建观察器
2observer.value = new IntersectionObserver((entries) => {
3  entries.forEach(entry => {
4    if (entry.isIntersecting) { // 元素进入可视区域
5      loadImage();
6      observer.value.unobserve(entry.target); // 加载后停止观察
7    }
8  });
9}, {
10  rootMargin: '50px 0px', // 提前50px开始加载
11  threshold: 0.1 // 元素10%可见时触发
12});
13

2. 组件化设计

我们将懒加载功能封装为独立的 LazyImage 组件，提高代码复用性和可维护性。

代码实现详解

组件模板结构

1<div class="lazy-image-container" ref="container">
2  <img
3    v-if="isLoaded && !hasError"
4    :src="actualSrc"
5    :alt="alt"
6    class="lazy-image"
7    :style="{ opacity: imageOpacity }"
8    @load="onLoad"
9    @error="onError"
10  />
11  <div v-else-if="hasError" class="image-placeholder">
12    <div class="error-message">图片加载失败</div>
13    <button @click="retryLoad" style="margin-top: 10px;">重试</button>
14  </div>
15  <div v-else class="image-placeholder">
16    <div class="spinner"></div>
17    <div>加载中...</div>
18  </div>
19</div>
20

组件包含三种状态：

加载中：显示旋转加载动画
加载完成：显示实际图片，带有淡入效果
加载失败：显示错误信息和重试按钮

核心逻辑实现

状态管理

1setup(props, { emit }) {
2  const isLoaded = ref(false);    // 是否已加载
3  const hasError = ref(false);    // 是否加载失败
4  const imageOpacity = ref(0);    // 图片透明度（用于淡入效果）
5  const observer = ref(null);     // Intersection Observer实例
6  const container = ref(null);    // 容器DOM引用
7  const actualSrc = ref('');      // 实际图片地址
8  // ...
9}
10

使用Vue3的Composition API，我们可以更清晰地组织代码逻辑。

图片加载控制

1const loadImage = () => {
2  if (props.slowLoad) {
3    // 模拟慢速网络 - 延迟2秒加载
4    setTimeout(() => {
5      actualSrc.value = props.src;
6      isLoaded.value = true;
7    }, 2000);
8  } else {
9    // 正常加载
10    actualSrc.value = props.src;
11    isLoaded.value = true;
12  }
13};
14

这个函数根据slowLoad属性决定是否模拟慢速网络，便于测试不同网络条件下的表现。

生命周期管理

1onMounted(() => {
2  // 创建并启动Intersection Observer
3  observer.value = new IntersectionObserver((entries) => {
4    // 观察逻辑...
5  });
6  
7  if (container.value) {
8    observer.value.observe(container.value);
9  }
10});
11
12onUnmounted(() => {
13  // 组件卸载时清理观察器
14  if (observer.value) {
15    observer.value.disconnect();
16  }
17});
18

确保在组件销毁时正确清理资源，避免内存泄漏。

错误处理与重试机制

1const onError = () => {
2  hasError.value = true;
3  emit('error'); // 向父组件发送错误事件
4};
5
6const retryLoad = () => {
7  hasError.value = false;
8  isLoaded.value = false;
9  // 重新触发观察
10  if (observer.value && container.value) {
11    observer.value.observe(container.value);
12  }
13};
14

良好的错误处理机制可以提升用户体验，让用户在图片加载失败时有机会重试。

应用该组件

在主组件中使用懒加载

1<div class="gallery">
2  <div 
3    v-for="(image, index) in images" 
4    :key="index" 
5    class="image-card"
6  >
7    <lazy-image
8      :src="image.url"
9      :alt="image.title"
10      :slow-load="networkSlow"
11      @loaded="onImageLoaded"
12      @error="onImageError"
13    ></lazy-image>
14    <div class="image-info">
15      <div class="image-title">{{ image.title }}</div>
16      <div class="image-description">{{ image.description }}</div>
17    </div>
18  </div>
19</div>
20