vue-lazyload 圖片依賴加載

一. vue lazyload插件：

插件地址：https://github.com/hilongjw/vue-lazyload   （點擊裏面的demo進入能夠查看使用代碼  https://github.com/hilongjw/vue-lazyload#demo）

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']能夠省略， 當插件跟頁面中的動畫或過渡等事件有衝突是， 能夠嘗試其餘選項	['scroll'（默認）, 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	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

 

四.vue-lazyload使用中遇到的問題：

1.使用 vue-lazyload 當須要動態切換圖片時，DOM綁定的圖片不會變，是須要加個 key，遂加之則圖片就能夠動態切換了，

<img v-lazy="ImgSrc" :key="ImgSrc">

 2.

使用vue-cli腳手架快速生成的框架中， 
src**同級目錄**中有static文件夾 
src**子文件夾**中有assets文件夾 
在使用vue-lazyload，設置error或loading屬性的圖片路徑時，

• 圖片在assets文件夾，就須要使用require（）進行引入。

Vue.use(VueLazyload, { preLoad: 1.3, loading: require('./assets/123.gif'), attempt: 1 })

• 圖片在static文件夾，就能夠直接寫路徑了

Vue.use(VueLazyload, { preLoad: 1.3, loading: '../static/123.gif', attempt: 1 })

vue-lazyload是在main.js文件中引入，不會被webpack進行編譯，src中的文件會被webpack編譯，包括assets，assets文件夾中的圖片地址，會在編譯過程當中改變。所以vue-lazyload沒法正確得到圖片地址，就不能顯示圖片了。

注：以上文件時綜合了幾個網絡大佬的成果整理而成……