Vue圖片懶加載之lazyload插件使用

  • 2019 年 10 月 6 日
  • 筆記

當內容沒有加載完的時候,用戶體驗不是很好,這時候,可以使用lazyload這個插件,提升用戶體驗,使用方法特別簡單易用

一. vue lazyload插件:

插件地址:https://github.com/hilongjw/vue-lazyload

二. 簡單使用實例:

其實這個插件做簡單使用的話是很簡單的,看官方文檔的話反而被誤導了,可以先按下邊的實例實現簡單引用,後邊再根據開發文檔做擴展。直接對代碼開始

1. 安裝插件:

npm install vue-lazyload --save-dev

2. main.js引入插件:

import VueLazyLoad from 'vue-lazyload'    Vue.use(VueLazyLoad,{      loading:require('common/image/default.png')  //這個就是你本地圖片的地址  })

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

<img :src="item.imgurl" style="width: 60px;height: 60px;" />  改成下面的,就可以使用了  <img v-lazy="item.imgurl" style="width: 60px;height: 60px;" />

三.功能擴展:

圖片懶加載的簡單效果已經實現了,然後就可以按這開發文檔的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