在 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
import.meta.glob
提供了图片的路径,通过懒加载方式导入。v-lazy
延迟加载图片,只有在图片滚动到视图中时才会加载。
这种方法可以显著提高应用的性能,特别是在处理大量图片或资源时。