vue中使用圖片懶載入vue-lazyload插件-js教程-PHP中文網

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

小云云

發布： 2018-01-04 09:40:46

原創

2650 人瀏覽過

本文主要介紹了淺談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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import VueLazyload from &#39;vue-lazyload&#39; //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: &#39;dist/error.png&#39;,
 loading: &#39;dist/loading.gif&#39;,
 attempt: 1
})

new Vue({
 el: &#39;body&#39;,
 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: &#39;dist/error.png&#39;,
 loading: &#39;dist/loading.gif&#39;,
 attempt: 1,
 // the default is [&#39;scroll&#39;, &#39;wheel&#39;, &#39;mousewheel&#39;, &#39;resize&#39;, &#39;animationend&#39;, &#39;transitionend&#39;]
 listenEvents: [ &#39;scroll&#39; ]
})

登入後複製

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

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