淺談vue中使用圖片懶加載vue-lazyload插件詳細(xì)指南

更新時(shí)間：2017年10月23日 11:51:53 作者：億傳茗韻

本篇文章主要介紹了淺談vue中使用圖片懶加載vue-lazyload插件詳細(xì)指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

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

說明

當(dāng)網(wǎng)絡(luò)請(qǐng)求比較慢的時(shí)候,提前給這張圖片添加一個(gè)像素比較低的占位圖片，不至于堆疊在一塊，或顯示大片空白，讓用戶體驗(yàn)更好一點(diǎn)。

使用方式

使用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' //引入這個(gè)懶加載插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 選項(xiàng)
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>

把之前項(xiàng)目中img 標(biāo)簽里面的 :src 屬性改成 v-lazy

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

參數(shù)選項(xiàng)說明

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	當(dāng)加載圖片失敗的時(shí)候	'data-src'	String
loading	當(dāng)加載圖片成功的時(shí)候	'data-src'	String
attempt	嘗試計(jì)數(shù)	3	Number
listenEvents	想要監(jiān)聽的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	動(dòng)態(tài)修改元素屬性	{ }	Element Adapter
filter	圖片監(jiān)聽或過濾器	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	觸發(fā)dom事件	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver

想要監(jiān)聽的事件

您可以通過傳遞數(shù)組來配置想要使用vue - lazyload的事件

監(jiān)聽器的名字。

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

如果您遇到這個(gè)插件重新設(shè)置加載的麻煩，這是很有用的

當(dāng)你有某些動(dòng)畫和過渡的時(shí)候。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: