vue3图片懒加载
vue3图片懒加载
懒加载就是延时加载,即当需要用到的时候再去加载
- 减少首页首次加载的数量,减少服务器的压力
- 网络请求比较慢的时候, 提前给图片添加一个像素比较低的占位图片,或显示大片空白,体验更好一点。
安装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" />