懶加載優化
（1）前言
利用vue-lazyload實現圖片懶加載，下面介紹下具體使用步驟
（2）下載安裝第三方模塊
（3）引入並激活相關參數
（4）組件調用
使用方法很簡單，將圖片的:src改為v-lazy即可，如下所示
此時效果如下
因為之前設置的img寬度為100，所以這里需要用到屬性選擇器去設置loading和loaded樣式
（5）如下所示
（6）優化：添加過渡效果
相關參數：
參考文章：
一. 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="newItem.picUrl"/>
三.功能擴展：
圖片懶加載的簡單效果已經實現了，然后就可以按這開發文檔的api進行擴展了：
| key | description | default | options |
|---|---|---|---|
preLoad |
proportion of pre-loading height（預加載高度比例） | 1.3 |
Number |
error |
src of the image upon load fail（圖片路徑錯誤時加載圖片） | 'data-src' |
String |
loading |
src of the image while loading（預加載圖片） | 'data-src' |
String |
attempt |
attempts count（嘗試加載圖片數量） | 3 |
Number |
listenEvents |
events that you want vue listen for （想要監聽的vue事件） 默認['scroll']可以省略， 當插件跟頁面中的動畫或過渡等事件有沖突是， 可以嘗試其他選項 |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element （動態修改元素屬性） |
{ } |
Element Adapter |
filter |
the image's listener filter（動態修改圖片地址路徑） | { } |
Image listener filter |
lazyComponent |
lazyload component | false |
Lazy Component |
dispatchEvent |
trigger the dom event | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
。