`v-lazy` 指令实现懒加载图像或其他资源

在 Vue 中，v-lazy 指令通常用于懒加载图像或其他资源，以优化性能。配合 Vite 的 import.meta.glob，你可以实现图像的懒加载，在图像需要展示时再加载，避免不必要的资源消耗。

下面是一个结合 v-lazy 和 import.meta.glob 的简单示例。

1. 使用 import.meta.glob 导入图像

首先，使用 import.meta.glob 批量导入图像，并创建一个懒加载的方式。

<script setup lang="ts">
import { ref } from 'vue';

// 使用 import.meta.glob 懒加载所有图片
const images = import.meta.glob('./assets/images/*.jpg', { eager: false });

// 创建一个 ref 来存储所有图片的路径
const imagePaths = ref<string[]>([]);

// 遍历导入的模块路径，并将路径存储在数组中
for (const path in images) {
  imagePaths.value.push(path);
}
</script>

2. 使用 v-lazy 实现懒加载图像

接着，在模板中使用 v-lazy 指令来实现图片的懒加载。

<template>
  <div>
    <h1>Lazy Loaded Images</h1>
    <div v-for="(image, index) in imagePaths" :key="index" class="image-container">
      <img v-lazy="image" alt="Lazy loaded image" />
    </div>
  </div>
</template>

3. 安装并使用 vue-lazyload 插件

v-lazy 是 Vue 2 中常用的指令，但在 Vue 3 中，懒加载图像通常使用 vue-lazyload 插件来实现。先安装该插件：

npm install vue-lazyload

然后在项目中配置它：

import { createApp } from 'vue';
import App from './App.vue';
import VueLazyload from 'vue-lazyload';

const app = createApp(App);

// 安装 VueLazyload 插件
app.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 1,
});

app.mount('#app');

4. 使用 v-lazy 指令加载图片

最后，你可以直接使用 v-lazy 指令来懒加载图片：

<template>
  <div>
    <h1>Lazy Loaded Images</h1>
    <div v-for="(image, index) in imagePaths" :key="index" class="image-container">
      <img v-lazy="image" alt="Lazy loaded image" />
    </div>
  </div>
</template>

结合 import.meta.glob 和 v-lazy

1. import.meta.glob 提供了图片的路径，通过懒加载方式导入。
2. v-lazy 延迟加载图片，只有在图片滚动到视图中时才会加载。

这种方法可以显著提高应用的性能，特别是在处理大量图片或资源时。