前言
做项目碰到了需要同时加载四十多个图标的需求,如果不管,会导致页面加载时图标区域长时间的空白,为了解决这种问题,我尝试使用懒加载解决。
使用vue3-lazyload插件
因为项目为vue3+vite,因此决定使用vue3-lazyload
- 安装
npm i vue3-lazyload
- 在main.js中导入
//引入图片懒加载插件
import Lazyload from 'vue3-lazyload'
//注册插件
app.use(Lazyload, {
loading: '@/assets/images/default.png', //可以指定加载中的图像
error: '@/assets/images/err.png', //可以指定加载失败的图像
})
- 在需要懒加载的图片中使用
<img v-lazy="[此处为图片url]" class="h-5 w-5" />
至此大功告成!