本文例項講述了vue實現圖片懶載入的方法。分享給大家供大家參考，具體如下：

vue圖片懶載入使用

首先第一步，安裝外掛

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入外掛

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{
error:'',//載入失敗的圖
loading:'' //載入中的預設圖
})

這是一個最簡單的配置

官方的詳細擴充套件配置文件

key	description	default	options
preLoad	proportion of pre-loading height（預載入高度比例）	1.3	Number
error	src of the image upon load fail（圖片路徑錯誤時載入圖片）	'data-src'	String
loading	src of the image while loading（預載入圖片）	'data-src'	String
attempt	attempts count（嘗試載入圖片數量）	3	Number
listenEvents	events that you want vue listen for （想要監聽的vue事件） 預設['scroll']可以省略， 當外掛跟頁面中的動畫或過渡等事件有衝突是， 可以嘗試其他選項	['scroll'（預設）, 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	dynamically modify the attribute of element （動態修改元素屬性）	{ }	Element Adapter
filter	the image's listener filter（動態修改圖片地址路徑）	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	trigger the dom event	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px',threshold: 0.1 }	IntersectionObserver

實現懶載入，使用v-lazy代替src屬性

<ul>
 <li v-for="img in list">
  <img v-lazy="img.src" >
 </li>
</ul>

對圖片單獨進行配置

方法1

<div v-lazy-container="{ selector: 'img',error: 'xxx.jpg',loading: 'xxx.jpg' }"></div>

方法2

將v-lazy='obj' 賦值一個物件

在data裡面宣告物件

可以設定三個屬性 src 圖片 loading載入狀態下的圖片 error錯誤狀態下的圖片

希望本文所述對大家vue.js程式設計有所幫助。