图片懒加载 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'
           

1. 第三步， 使用

   VueLazyload

   ，并且进行相应的一些配置，内部会自定义一个指令

   lazy

   ，代码如下所示：

Vue.use(VueLazyload, {
  loading
})
           

1. 第四步，通过

   v-lazy

   命令，在需要使用图片懒加载的地方，去进行使用，代码如下所示：