【vuejs外掛】vue中使用圖片懶載入vue-lazyload外掛詳細指南

starkwang發表於2017-10-23
VueJS

在vue中使用圖片懶載入詳細指南

說明

當網路請求比較慢的時候,提前給這張圖片新增一個畫素比較低的佔點陣圖片，不至於堆疊在一塊，或顯示大片空白，讓使用者體驗更好一點。

使用方式

使用vue的 vue-lazyload 外掛
外掛地址:

https://www.npmjs.com/package/vue-lazyload

案例

demo： 懶載入案例demo

Installation 安裝方式

npm


$ npm i vue-lazyload -D

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script>

用法

main.js 在入口檔案


import Vue from `vue`
import App from `./App.vue`
import VueLazyload from `vue-lazyload`  //引入這個懶載入外掛

Vue.use(VueLazyload)

// 或者新增VueLazyload 選項
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: `dist/error.png`,
  loading: `dist/loading.gif`,
  attempt: 1
})

new Vue({
  el: `body`,
  components: {
    App
  }
})

在入口檔案新增後，在元件任何地方都可以直接使用把 img 裡的:src -> v-lazy

 <div class="pic">
    <a href="#"><img :src="`/static/img/` + item.productImage" alt=""></a>
</div>

把之前專案中img 標籤裡面的 :src 屬性 改成 v-lazy 
 <div class="pic">
    <a href="#"><img v-lazy="`/static/img/` + item.productImage" alt=""></a>
</div>

引數選項說明

key description default options
preLoad proportion of pre-loading height 1.3 Number
error 當載入圖片失敗的時候 `data-src` String
loading 當載入圖片成功的時候 `data-src` String
attempt 嘗試計數 3 Number
listenEvents 想要監聽的事件 [`scroll`, `wheel`, `mousewheel`, `resize`, `animationend`, `transitionend`, `touchmove`] Desired Listen Events
adapter 動態修改元素屬性 { } Element Adapter
filter 圖片監聽或過濾器 { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent 觸發dom事件 false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver 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` ]
})

如果您遇到這個外掛重新設定載入的麻煩，這是很有用的
當你有某些動畫和過渡的時候。

相關文章