// 創(chuàng)建觀察器
observer.value = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) { // 元素進(jìn)入可視區(qū)域
      loadImage();
      observer.value.unobserve(entry.target); // 加載后停止觀察
    }
  });
}, {
  rootMargin: '50px 0px', // 提前50px開(kāi)始加載
  threshold: 0.1 // 元素10%可見(jiàn)時(shí)觸發(fā)
});

<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實(shí)例
  const container = ref(null);    // 容器DOM引用
  const actualSrc = ref('');      // 實(shí)際圖片地址
  // ...
}

const loadImage = () => {
  if (props.slowLoad) {
    // 模擬慢速網(wǎng)絡(luò) - 延遲2秒加載
    setTimeout(() => {
      actualSrc.value = props.src;
      isLoaded.value = true;
    }, 2000);
  } else {
    // 正常加載
    actualSrc.value = props.src;
    isLoaded.value = true;
  }
};

onMounted(() => {
  // 創(chuàng)建并啟動(dòng)Intersection Observer
  observer.value = new IntersectionObserver((entries) => {
    // 觀察邏輯...
  });
  
  if (container.value) {
    observer.value.observe(container.value);
  }
});

onUnmounted(() => {
  // 組件卸載時(shí)清理觀察器
  if (observer.value) {
    observer.value.disconnect();
  }
});

const onError = () => {
  hasError.value = true;
  emit('error'); // 向父組件發(fā)送錯(cuò)誤事件
};

const retryLoad = () => {
  hasError.value = false;
  isLoaded.value = false;
  // 重新觸發(fā)觀察
  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>