-
第一步,下载
vue-lazyload
,可以通过npm install vue-lazyload --save
命令进行下载 -
第二步,在
vue
项目中的main.js
文件中,去引入vue-lazyload
以及图片在进行懒加载的时候所需要呈现的图片,代码如下所示:
import VueLazyload from 'vue-lazyload'
import loading from './common/imgs/loading.gif'
- 第三步, 使用
VueLazyload
,并且进行相应的一些配置,内部会自定义一个指令lazy
,代码如下所示:
Vue.use(VueLazyload, {
loading
})
- 第四步,通过
v-lazy
命令,在需要使用图片懒加载的地方,去进行使用,代码如下所示:
<img v-lazy="food.image">