vue-lazyload插件

目錄

• 使用
• 參數說明

使用

npm install vue-lazyload --save

//注冊插件
import vueLazyload from 'vue-lazyload'
Vue.use(vueLazyload);

//在需要懶加載的圖片上
<img v-lazy="imgUrl">

參數說明

注冊插件的時候，是可以傳入第二個配置參數的

Vue.use(vueLazyload,{})

可選的參數如下：
preLoad:類型Number,默認1.3. 表示lazyload的元素距離頁面底部距離的百分比.計算值為(preload - 1).
attempt:圖片加載失敗后的重試次數.默認為3.
error:類型string.圖片加載失敗后的顯示的失敗圖片路徑.
loading:類型string.圖片正在加載中顯示的loading圖片的路徑.
listenEvents:類型array.默認['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在監聽上述事件中,判斷圖片是否在preload的位置.如果你不想在那么多事件中判斷,可以指定一個或者幾個.例如如果你給這個屬性只指定['touchmove'].那么scroll 屏幕不會加載圖片,只有手指滑動屏幕才會加載圖片.

adapter:注冊img 的loading,loaded,error三個狀態的回調函數,參數會暴露懶加載的img元素,可以對其進行操作.
filter: img未加載之前,解析到src 的時候注冊的回調函數.可以在加載圖片之前,對src進行修改.注冊在filter下的所有的函數都會執行
lazyComponent:類型Boolean.是否啟用懶加載組件. 組件中的內容只有在出現在preload的位置中才會加載組件.這個lazyloadComponent 組件有個缺點就是,組件在加載前是什么都不渲染的,這樣子的話,有可能會影響布局,以及加載前到加載后的切換不好,有點突兀和生硬.挖坑(vue懶加載組件)

observer:是否啟用IntersectionObserver,這個api有兼容問題
observerOptions:默認{ rootMargin: '0px', threshold: 0.1 } 主要是我對這個pai不熟,按照vue-lazyload的說法是開啟之后,對很多節點的情況會優化性能.挖坑吧