VUE图片懒加载-vue lazyload插件的简单使用

序：vue项目时候，我们要对图片进行懒加载处理，这个开发项目中就不需要自己去写了，因为比较方便使用vue lazyload进行处理，高效率开发

一. vue lazyload插件：

插件地址：https://www.npmjs.com/package/vue-lazyload

二. vue lazyload使用

这个插件的开发文档比较烦人，一堆废话。

我们大部分只需要做简单使用就可以了，看官方文档的话反而被误导了，可以先按下边的实例实现简单引用，后边根据自己需要去查看官方文档扩展

1. 安装：

npm install vue-lazyload --save-dev

2. main.js引入：

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',
    loading:'./static/loading.png'
})

这个加载中图片和错误图片显示，可以自己去找合适自己的，引入路径对就可以了

3. vue项目中将需要进行懒加载的图片绑定 v-bind:src 修改为 v-lazy

<img class="item-img" v-lazy="图片地址"/>

比较简单的引用就这样搞定了，如果需要了解更多，可以去查看官方文档