vue 圖片懶加載插件 vue-lazyload 使用說明

特色

• 輕量、強大、易用
• 支持全部圖片
• 支持添加加載時樣式
• 支持 vue1 和 vue2

使用方法

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>

可配置項

key	description	default
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

key	description	value
el	當前元素	-
naturalHeight	圖片原始高度	180
naturalWidth	圖片原始寬度	236
performanceData	加載性能	{ init: 1526632128700, loadStart: 1526632128708, loadEnd: 1526632128829 }
rect	圖片元素 getBoundingClientRect 值	{ bottom: 25, <br/> height: 0, left: 8, right: 312, top: 25, width: 304, x: 8, y: 25 }
state	加載狀態	{ error: false,  loaded: true,  rendered: false }

options

key	description	value
ListenEvents	與配置項 listenEvents 相同（但注意是大寫開頭，懷疑是 bug，已提 issue）	['scroll']
supportWebp	判斷當前瀏覽器是否支持 webp	Boolean

supportWebp 實現代碼

function supportWebp() {
  if (!inBrowser) return false;
  var support = true;
  var d = document;
  try {
    var el = d.createElement('object');
    el.type = 'image/webp';
    el.style.visibility = 'hidden';
    el.innerHTML = '!';
    d.body.appendChild(el);
    support = !el.offsetWidth;
    d.body.removeChild(el);
  } catch (err) {
    support = false;
  }
  return support;
}

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

這裏便採用了 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) return
      const 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% 的高度時，觸發當前元素顯示函數。