vue中使用圖片懶載入vue-lazyload插件

本文主要介紹了淺談vue中使用圖片懶加載vue-lazyload插件詳細指南，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

在vue中使用圖片懶載入詳細指南，分享給大家。具體如下：

說明

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

案例

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

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

#

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

#keydescriptiondefault#optionspreLoadproportion of pre-loading height1.3Numbererror當載入圖片失敗的時候'src'Stringloading當載入圖片成功的時候'src'Stringattempt嘗試計數3NumberlistenEvents想要監聽的事件['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']Desired Listen Eventsadapter在動態修改元素屬性{ }Element Adapterfilter圖片監聽或過濾器{ }Image listener filter lazyComponentlazyload componentfalse#Lazy ComponentdispatchEvent#觸發dom事件

		把之前項目中img 標籤裡面的:src 屬性改成v-lazy
參數選項說明

falseBoolean

throttleWait

throttle wait

#200

#Number

#observer

use IntersectionObserverfalse

Boolean

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' ]
})

###如果您遇到這個外掛程式重新設定載入的麻煩，這是很有用的######相關推薦：######## ####圖片懶載入imgLazyLoading.js詳解############如何利用IntersectionObserver實作圖片懶載入############圖片懶載入##### #

以上是vue中使用圖片懶載入vue-lazyload插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！