首頁 > web前端 > js教程 > 主體

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

小云云
發布: 2018-01-04 09:40:46
原創
2677 人瀏覽過

本文主要介紹了淺談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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!