vue-lazyload 使用说明
基本使用方法
main.js
import Vue from 'vue' import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)new Vue({el: '#app',data: {imgs: ['http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp','http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp','http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp',]} })template:
<div id="app"><img v-for="img in imgs" v-lazy="img"><img v-for="img in imgs" v-lazy:background-image="img"> </div>可配置項
| preLoad | 提前加載高度（數(shù)字 1 表示 1 屏的高度） | 1.3 |
| error | 圖片加載失敗時顯示的圖片 | ‘data-src’ |
| loading | 圖片加載狀態(tài)下顯示的圖片 | ‘data-src’ |
| attempt | 加載錯誤后最大嘗試次數(shù) | 3 |
| listenEvents | 監(jiān)聽事件 | [‘scroll’, ‘wheel’, ‘mousewheel’,‘resize’,‘a(chǎn)nimationend’,‘transitionend’,‘touchmove’]` |
| adapter | 動態(tài)修改元素屬性 | { } |
| filter | 圖片監(jiān)聽過濾 | {} |
| lazyComponent | 組件懶加載 | false |
| dispatchEvent | 觸發(fā)元素狀態(tài)監(jiān)聽事件（error, loaded, rendered） | false |
重點
loading & error
這兩個參數(shù)用于配置圖片相應(yīng)加載狀態(tài)下的圖片
因為也是以圖片 src 的形式加載，因此應(yīng)使用比原圖小的圖片，當(dāng)然也可以使用 base64 圖片
如果我只是想用純顏色怎么辦？
除了以上 src 兩種形式外，我們還可以借用 css 來實現(xiàn)加載狀態(tài)
該插件會在圖片元素上加上當(dāng)前的加載狀態(tài)：分別是 loading、loaded、error
此時使用元素選擇器，來給每一個狀態(tài)添加相應(yīng)的樣式
<style>img[lazy=loading] { }img[lazy=error] { }img[lazy=loaded] { } </style>listenEvents
默認(rèn)配置的監(jiān)聽事件：[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘a(chǎn)nimationend’, ‘transitionend’, ‘touchmove’]
為了提高頁面性能，我們可以指定當(dāng)前頁面懶加載監(jiān)聽的事件，
如[‘scroll’]
但因為 vua-lazyload 是全局配置的，我們應(yīng)該怎么對指定頁面采用指定配置呢？
為了解決這個問題，我們需要使用另外一個配置項：filter
filter(listener, options)
圖片監(jiān)聽過濾，每張圖片加載時都會執(zhí)行一次。
會得到以下關(guān)鍵數(shù)據(jù)：
listener
| el | 當(dāng)前元素 | - |
| naturalHeight | 圖片原始高度 | 180 |
| naturalWidth | 圖片原始寬度 | 236 |
| performanceData | 加載性能 | {init: 1526632128700,loadStart: 1526632128708,loadEnd: 1526632128829} |
| rect | 圖片元素 getBoundingClientRect 值 | {bottom: 25, height:0,left:8,right:312,top: 25,width: 304,x: 8,y: 25} |
| state | 加載狀態(tài) | {error: false, loaded: true, rendered: false} |
options
| ListenEvents | 與配置項 listenEvents 相同 | [‘scroll’] |
| supportWebp | 判斷當(dāng)前瀏覽器是否支持 webp | Boolean |
supportWebp 實現(xiàn)代碼
之前留了一個問題：如何根據(jù)當(dāng)前頁面需要配置懶加載監(jiān)聽方式？這里便采用了 filter 來解決這個問題
filter: {index(listener, opts) {if (location.href.indexOf('index')>-1) {opts.ListenEvents = ['animationend'] }} }除此之外，filter 還能做什么呢？
這里再舉一個官方的例子：
講到這里，我們了解 filter 是在加載圖片之前遍歷調(diào)用的。
但！為什么 listener 參數(shù)里會有圖片的加載時長和大小呢？？
圖片的加載時長和大小參數(shù)是在圖片 loaded 狀態(tài)后，再寫到對象里的。所以，如果你在 filter 里直接讀取圖片的 “加載后屬性”，會報錯（萬能的 setTimeout 了解下）。此時，你就應(yīng)該使用下面的配置了：adapter
adapter
用于定義圖片的三個加載狀態(tài)下分別觸發(fā)的函數(shù)：
adapter: {loaded(listender, options) {console.log('loaded')},loading(listender, options) {console.log('loading')},error(listender, options) {console.log('error')} }所以，為解決上題，要準(zhǔn)確拿到圖片的大小，應(yīng)該寫在 loaded 狀態(tài)觸發(fā)函數(shù)下
lazyComponent
實現(xiàn)被 lazy-component 標(biāo)簽包含的元素延遲渲染
<lazy-component @show="handler"><img class="mini-cover" :src="img.src" width="100%" height="400"> </lazy-component><script>{...methods: {handler (component) {console.log('this component is showing')}}} </script>dispatchEvent
lazyload 插件默認(rèn)會阻塞圖片元素的 onload 等事件，若要打開，只需在配置中將當(dāng)前項設(shè)為 true
observer
這里指的是瀏覽器的一個 API：Intersection Observer ：當(dāng)指定元素進(jìn)入頁面時，自動觸發(fā)函數(shù)
use Intersection Observer to to improve performance of a large number of nodes.
lazyload 默認(rèn)的觸發(fā)方式是當(dāng)頁面滾動時，遍歷全部元素，查看元素是否在視圖內(nèi)，從而加載圖片。因此，當(dāng)元素特別多時，非常消耗性能。
采用 observer 則能避免這個問題，很好地提高性能。（但有兼容性問題，當(dāng)瀏覽器不支持時，即使你設(shè)了 true，還是以 false 去操作）
observerOptions
這個是 observer 的配置參數(shù)：
{ rootMargin: '0px', threshold: 0.1 }rootMargin
表示元素的擴(kuò)展范圍，其值的書寫方式與 margin 的書寫方式一致。
當(dāng)值為 10px 時，表示元素的顯示范圍向外擴(kuò)展 10px（但不影響布局）
threshold
表示元素觸發(fā)顯示的高度比例。
0.1 表示元素顯示 10% 的高度時，觸發(fā)當(dāng)前元素顯示函數(shù)。
總結(jié)
以上是生活随笔為你收集整理的vue-lazyload 使用说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： kettle安装运行及JDK配置
- 下一篇： lazyload ajax同步,jQue