vue中如何使用圖片懶加載vue-lazyload插件

這篇文章給大家分享的是有關vue中如何使用圖片懶加載vue-lazyload插件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體如下：

說明

當網絡請求比較慢的時候,提前給這張圖片添加一個像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗更好一點。

使用方式

使用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="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + item.productImage" alt=""></a>
</div>

把之前項目中img 標簽里面的 :src 屬性 改成 v-lazy 

 <div class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + item.productImage" alt=""></a>
</div>

參數選項說明

想要監聽的事件

您可以通過傳遞數組來配置想要使用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插件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！