vue3图片懒加载

vue3图片懒加载

懒加载就是延时加载,即当需要用到的时候再去加载

  1. 减少首页首次加载的数量,减少服务器的压力
  2. 网络请求比较慢的时候, 提前给图片添加一个像素比较低的占位图片,或显示大片空白,体验更好一点。

安装vue3-lazy

$ npm install vue3-lazy -S

main.ts

import App from './App.vue'
import lazyPlugin from 'vue3-lazy'
// use
const app = createApp(App);
app.use(lazyPlugin, {
  loading: require('@/assets/img/sp.png'), // 加载时默认图片
  error: require('@/assets/img/sp.png')// 图片失败时默认图片
})

在组件中,图片标签上使用 v-lazy

//图片
<img v-lazy="info.urlImg" /> 
posted @ 2021-10-21 09:38  少年。  阅读(1284)  评论(0编辑  收藏  举报