vue-lazyLoad的使用方法

1. 安装插件

npm install vue-lazyload --save-dev

2. 引入插件

如果是单页面，可以在全局main.js 中引入
如果是多页面，需要在每次页面的js中引入

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

3. 绑定

vue文件中将<img>标签需要懒加载的图片从v-bind:src 改为v-lazy

<img class="item-pic" v-lazy="newItem.picUrl"/>

vue文件中将任何标签需要懒加载的背景图片改为v-lazy:background-image

<div class="bg-company" v-lazy:background-image="imgIcon"></div>

功能扩展：

图片懒加载的简单效果已经实现了，然后就可以按这开发文档的api进行扩展了：

对loading图片大小进行处理

    img[lazy = 'loading']  {
      width: 29px !important;
        height: 34px!important;
    }
    img[lazy = 'loaded']  {
        background-color: #ffffff !important;
        width: 100%;
    }