vue3实现懒加载

前言

做项目碰到了需要同时加载四十多个图标的需求，如果不管，会导致页面加载时图标区域长时间的空白，为了解决这种问题，我尝试使用懒加载解决。

使用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" />

至此大功告成！