vue-lazyload圖片懶加載的簡單使用

一、vue lazyload插件：

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

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

二、簡單使用實例：

這個插件還是蠻好用的，就是感覺這個插件的開發文檔有點太啰嗦了，一股腦把所有的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"/>

 4、vue文件中需要懶加載的背景圖片，v-lazy:background-image="imgUrl"

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

三.功能擴展：

圖片懶加載的簡單效果已經實現了，然后就可以按這開發文檔的api進行擴展了：