这里只能实现图片的懒加载,不能实现其他的懒加载。
加载插件:
npm install vue-lazyload --save
在main.js中写入插件
// 图片懒加载
import VueLazyload from "vue-lazyload";
const app = createApp(App)
app.use(VueLazyload,{
preLoad: 1.3,
error:'@/assets/images/error.png',
});
实现:
<template>
<div class="aaa">
<img v-lazy="img1" class="img" />
<img v-lazy="img2" class="img" />
<img v-lazy="img3" class="img" />
<img v-lazy="img4" class="img" />
<img v-lazy="img5" class="img" />
</div>
</template>
<script setup>
import img1 from '../../assets/images/1.png'
import img2 from '../../assets/images/2.png'
import img3 from '../../assets/images/3.png'
import img4 from '../../assets/images/4.png'
import img5 from '../../assets/images/5.png'
</script>
<style>
.aaa {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.img {
width: 400px;
}
</style>