本文主要介紹了淺談vue中使用圖片懶加載vue-lazyload插件詳細指南,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。
在vue中使用圖片懶載入詳細指南,分享給大家。具體如下:
說明
當網路請求比較慢的時候,提前為這張圖片加上一個像素比較低的佔位圖片,不至於堆疊在一塊,或顯示大片空白,讓使用者體驗更好一點。
案例
demo: 懶載入案例demo
Installation 安裝方式
npm
$ npm i vue-lazyload -D
CDN
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> <script> Vue.use(VueLazyload) ... </script>
main.js 在入口檔案
## | |||
把之前項目中img 標籤裡面的:src 屬性改成v-lazy | |||
參數選項說明 | #key | description | |
#options | preLoad | ||
1.3 | Number | error | |
'src' | String | loading | |
'src' | String | attempt | |
3 | Number | listenEvents | |
['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events | adapter | |
{ } | Element Adapter | filter | |
{ } | Image listener filter | lazyComponent | |
false | #Lazy Component | dispatchEvent |
falseBoolean
throttleWait
throttle wait
#200
#observer
observerOptionsIntersectionObserver options
###{ rootMargin: '0px', threshold: 0.1 }######IntersectionObserver###################想要監聽的事件## ##########您可以透過傳遞陣列來設定想要使用vue - lazyload的事件#########監聽器的名稱。 ############Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1, // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend'] listenEvents: [ 'scroll' ] })
以上是vue中使用圖片懶載入vue-lazyload插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!