基本使用方法

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>

可配置項

keydescriptiondefault

preLoad	提前加載高度（數字 1 表示 1 屏的高度）	1.3
error	圖片加載失敗時顯示的圖片	‘data-src’
loading	圖片加載狀態下顯示的圖片	‘data-src’
attempt	加載錯誤后最大嘗試次數	3
listenEvents	監聽事件	[‘scroll’, ‘wheel’, ‘mousewheel’,‘resize’,‘animationend’,‘transitionend’,‘touchmove’]`
adapter	動態修改元素屬性	{ }
filter	圖片監聽過濾	{}
lazyComponent	組件懶加載	false
dispatchEvent	觸發元素狀態監聽事件（error, loaded, rendered）	false

重點

loading & error
這兩個參數用于配置圖片相應加載狀態下的圖片
因為也是以圖片 src 的形式加載，因此應使用比原圖小的圖片，當然也可以使用 base64 圖片
如果我只是想用純顏色怎么辦？
除了以上 src 兩種形式外，我們還可以借用 css 來實現加載狀態
該插件會在圖片元素上加上當前的加載狀態：分別是 loading、loaded、error

<img src="imgUrl" lazy="loading"> <img src="imgUrl" lazy="loaded"> <img src="imgUrl" lazy="error">

此時使用元素選擇器，來給每一個狀態添加相應的樣式

<style>img[lazy=loading] { }img[lazy=error] { }img[lazy=loaded] { } </style>

listenEvents

默認配置的監聽事件：[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’]

為了提高頁面性能，我們可以指定當前頁面懶加載監聽的事件，
如[‘scroll’]
但因為 vua-lazyload 是全局配置的，我們應該怎么對指定頁面采用指定配置呢？
為了解決這個問題，我們需要使用另外一個配置項：filter

filter(listener, options)
圖片監聽過濾，每張圖片加載時都會執行一次。

會得到以下關鍵數據：

listener

keydescriptionvalue

el	當前元素	-
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	加載狀態	{error: false, loaded: true, rendered: false}

options

keydescriptionvalue

ListenEvents	與配置項 listenEvents 相同	[‘scroll’]
supportWebp	判斷當前瀏覽器是否支持 webp	Boolean

supportWebp 實現代碼

之前留了一個問題：如何根據當前頁面需要配置懶加載監聽方式？

這里便采用了 filter 來解決這個問題

filter: {index(listener, opts) {if (location.href.indexOf('index')>-1) {opts.ListenEvents = ['animationend'] }} }

除此之外，filter 還能做什么呢？
這里再舉一個官方的例子：

filter: {progressive (listener, options) { // 實現漸近式加載圖片（先加載模糊的圖）const isCDN = /qiniudn.com/if (isCDN.test(listener.src)) {listener.el.setAttribute('lazy-progressive', 'true')listener.loading = listener.src + '?imageView2/1/w/10/h/10'}},webp (listener, options) { // 加載 webp 圖if (!options.supportWebp) returnconst isCDN = /qiniudn.com/if (isCDN.test(listener.src)) {listener.src += '?imageView2/2/format/webp'}} }

講到這里，我們了解 filter 是在加載圖片之前遍歷調用的。

但！為什么 listener 參數里會有圖片的加載時長和大小呢？？

圖片的加載時長和大小參數是在圖片 loaded 狀態后，再寫到對象里的。所以，如果你在 filter 里直接讀取圖片的 “加載后屬性”，會報錯（萬能的 setTimeout 了解下）。此時，你就應該使用下面的配置了：adapter

adapter

用于定義圖片的三個加載狀態下分別觸發的函數：

adapter: {loaded(listender, options) {console.log('loaded')},loading(listender, options) {console.log('loading')},error(listender, options) {console.log('error')} }

所以，為解決上題，要準確拿到圖片的大小，應該寫在 loaded 狀態觸發函數下

lazyComponent

實現被 lazy-component 標簽包含的元素延遲渲染

<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 插件默認會阻塞圖片元素的 onload 等事件，若要打開，只需在配置中將當前項設為 true

observer

這里指的是瀏覽器的一個 API：Intersection Observer ：當指定元素進入頁面時，自動觸發函數

use Intersection Observer to to improve performance of a large number of nodes.

lazyload 默認的觸發方式是當頁面滾動時，遍歷全部元素，查看元素是否在視圖內，從而加載圖片。因此，當元素特別多時，非常消耗性能。

采用 observer 則能避免這個問題，很好地提高性能。（但有兼容性問題，當瀏覽器不支持時，即使你設了 true，還是以 false 去操作）

observerOptions

這個是 observer 的配置參數：

{ rootMargin: '0px', threshold: 0.1 }

rootMargin

表示元素的擴展范圍，其值的書寫方式與 margin 的書寫方式一致。

當值為 10px 時，表示元素的顯示范圍向外擴展 10px（但不影響布局）

threshold

表示元素觸發顯示的高度比例。

0.1 表示元素顯示 10% 的高度時，觸發當前元素顯示函數。

總結

以上是生活随笔為你收集整理的vue-lazyload 使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。