使用Vue3实现图片懒加载功能

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

<div class="lazy-image-container" ref="container">
  <img
    v-if="isLoaded && !hasError"
    :src="actualSrc"
    :alt="alt"
    class="lazy-image"
    :style="{ opacity: imageOpacity }"
    @load="onLoad"
    @error="onError"
  />
  <div v-else-if="hasError" class="image-placeholder">
    <div class="error-message">图片加载失败</div>
    <button @click="retryLoad" style="margin-top: 10px;">重试</button>
  </div>
  <div v-else class="image-placeholder">
    <div class="spinner"></div>
    <div>加载中...</div>
  </div>
</div>

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

const loadImage = () => {
  if (props.slowLoad) {
    // 模拟慢速网络 - 延迟2秒加载
    setTimeout(() => {
      actualSrc.value = props.src;
      isLoaded.value = true;
    }, 2000);
  } else {
    // 正常加载
    actualSrc.value = props.src;
    isLoaded.value = true;
  }
};

onMounted(() => {
  // 创建并启动Intersection Observer
  observer.value = new IntersectionObserver((entries) => {
    // 观察逻辑...
  });
  
  if (container.value) {
    observer.value.observe(container.value);
  }
});

onUnmounted(() => {
  // 组件卸载时清理观察器
  if (observer.value) {
    observer.value.disconnect();
  }
});

const onError = () => {
  hasError.value = true;
  emit('error'); // 向父组件发送错误事件
};

const retryLoad = () => {
  hasError.value = false;
  isLoaded.value = false;
  // 重新触发观察
  if (observer.value && container.value) {
    observer.value.observe(container.value);
  }
};

<div class="gallery">
  <div 
    v-for="(image, index) in images" 
    :key="index" 
    class="image-card"
  >
    <lazy-image
      :src="image.url"
      :alt="image.title"
      :slow-load="networkSlow"
      @loaded="onImageLoaded"
      @error="onImageError"
    ></lazy-image>
    <div class="image-info">
      <div class="image-title">{{ image.title }}</div>
      <div class="image-description">{{ image.description }}</div>
    </div>
  </div>
</div>