vue3实现几百张图片懒加载

在 Vue 3 中实现几百张图片的懒加载可以使用以下两种方式：

1. 基于 Intersection Observer 的封装组件

这种方式通过封装一个懒加载组件，将多张图片的懒加载逻辑统一管理起来，减少重复代码。示例代码如下：

<template>
  <div class="lazy-container">
    <div v-for="(item, index) in list" :key="index" class="lazy-item">
      <img-lazy :src="item.src" :placeholder-src="item.placeholder" />
    </div>
  </div>
</template>

<script>
import ImgLazy from './ImgLazy.vue';

export default {
  name: 'LazyContainer',
  components: {
    ImgLazy
  },
  data() {
    return {
      list: [
        {
          src: 'https://example.com/image1.jpg',
          placeholder: 'https://example.com/placeholder1.jpg'
        },
        {
          src: 'https://example.com/image2.jpg',
          placeholder: 'https://example.com/placeholder2.jpg'
        },
        // ... 其他图片的地址和占位图地址
      ]
    };
  }
};
</script>

在 ImgLazy 组件中使用 Intersection Observer 实现图片的懒加载，具体实现可以参考上一个问题的回答。在 LazyContainer 组件中，通过 v-for 循环渲染多个 ImgLazy 组件，实现多张图片的懒加载。

2. Vue 3 新特性：Suspense 和异步组件

Vue 3 中新增了 Suspense 和异步组件的概念，可以更方便地实现图片懒加载。示例代码如下：

<template>
  <div class="lazy-container">
    <template v-for="(item, index) in list" :key="index">
      <Suspense>
        <template #default>
          <img :src="item.src" :alt="item.alt" />
        </template>
        <template #fallback>
          <img :src="item.placeholder" :alt="item.alt" />
        </template>
      </Suspense>
    </template>
  </div>
</template>

<script>
export default {
  name: 'LazyContainer',
  data() {
    return {
      list: [
        {
          src: 'https://example.com/image1.jpg',
          placeholder: 'https://example.com/placeholder1.jpg',
          alt: 'image1'
        },
        {
          src: 'https://example.com/image2.jpg',
          placeholder: 'https://example.com/placeholder2.jpg',
          alt: 'image2'
        },
        // ... 其他图片的地址和占位图地址
      ]
    };
  }
};
</script>

在组件中，使用 Suspense 包裹一个异步组件，当异步组件加载完成时，将图片的 src 属性修改为真实的图片地址，实现懒加载。当异步组件加载时，可以通过 fallback slot 渲染一个占位图，提高用户体验。需要注意的是，异步组件需要返回一个 Promise 对象，以便在加载完成时触发 Suspense 的回调函数。

以上两种方式均可以实现多张图片的懒加载，具体选择哪种方式，可以根据实际情况和项目需求来进行选择。