github上一顿搜,找到了 vue3-lazy
,看文档使用步骤跟之前类似,简单操作之后,可用,也提升了项目首页加载速度,beautiful,赶紧记录一下使用步骤,方便他人。
安装命令
npm install vue3-lazy -S
//或者
yarn add vue3-lazy
main.ts中初始化
import App from './App.vue'
import lazyPlugin from 'vue3-lazy'
createApp(App)
.use(lazyPlugin, {
loading: require('@/assets/images/default.png'), // 图片加载时默认图片
error: require('@/assets/images/error.png')// 图片加载失败时默认图片
})
.mount('#app')
template中使用
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
github地址:https://github.com/ustbhuangyi/vue3-lazy
欢迎在评论区交流。如果文章对你有所帮助,不要忘了点上宝贵的一赞!
给我留言