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進行擴展了：