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.是否啓用懶加載組件.<lazy-component>組件中的內容只有在出如今preload的位置中才會加載組件.這個lazyloadComponent 組件有個缺點就是,組件在加載前是什麼都不渲染的,這樣子的話,有可能會影響佈局,以及加載前到加載後的切換很差,有點突兀和生硬.挖坑(vue懶加載組件)

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

還能夠經過監聽vue-lazyload組件的loaded事件來查看資源加載的時間