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

1、vue lazyload插件：

插件地址：https://github.com/hilongjw/vue-lazyload

demo：http://hilongjw.github.io/vue-lazyload/

2、简单使用实例：

这个插件仍是蛮好用的，就是感受这个插件的开发文档有点太啰嗦了，一股脑把全部的api扩展都罗列出来，源码中并无能够运行的实例提供。

其实这个插件作简单使用的话是很简单的，看官方文档的话反而被误导了，能够先按下边的实例实现简单引用，后边再根据开发文档作扩展。

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-pic" v-lazy="picUrl"/>

 四、vue文件中须要懒加载的背景图片，v-lazy:background-image="imgUrl"

<div v-lazy:background-image="imgLink"></div>

三.功能扩展：

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