Vue圖片懶加載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',
	load:'./static/loading.png'
})

3.vue文件中將需要懶加載的圖片綁定v-bind:src修改爲v-lazy

<img class="item-pic" v-lazy="item.src">

三.功能擴展：

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

來源地址：https://www.cnblogs.com/xyyt