Vue懒加载使用全教程(收藏加关注)简单易学

Lazyload 是 Vue 指令，使用前需要对指令进行注册

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import Vant, { Lazyload } from 'vant'

import 'vant/lib/index.css'

createApp(App).use(store).use(router).use(Vant).use(Lazyload, {

  lazyComponent: true

}).mount('#app')

使用懒加载之前,记住需要下载指令懒加载的vue指令

npm install vue-lazyload --save-dev

这个不要忘记否则你没有办法使用

另外组件使用懒加载需要进行开启

部分官网都是介绍的

<van-card

                :price="item.price"

                :desc="item.desc"

                :title="item.title"

                class="goods-card"

                :thumb="item.img"

                :lazy-load="true"

/>

比如这个是vant说的开启,如果你不开启,就是false,就是没有办法使用所谓的懒加载的

然后在V-for循环的地方,进行

例如:

v-for="(item,index) in Audis" :key="index" v-lazy="item.img"

循环你的图片item.img =>img是你的图片,你的可能不是img,比如你的数组[{image:'图片地址'}]

那就是item.image

这是关于组件的=======================================

如果是自己的写的图片循环那就直接v-for="img in xxx"  v-lazy="img"

一定要看文档哦!