图片懒加载 vue-lazyload 在vue项目的实践

1. 第一步，下载 vue-lazyload，可以通过 npm install vue-lazyload --save 命令进行下载

2. 第二步，在vue项目中的 main.js 文件中，去引入 vue-lazyload 以及图片在进行懒加载的时候所需要呈现的图片，代码如下所示：

import VueLazyload from 'vue-lazyload'
import loading from './common/imgs/loading.gif'

3. 第三步， 使用VueLazyload，并且进行相应的一些配置，内部会自定义一个指令 lazy，代码如下所示：

Vue.use(VueLazyload, {
  loading
})

4. 第四步，通过 v-lazy 命令，在需要使用图片懒加载的地方，去进行使用，代码如下所示：

<img v-lazy="food.image">