vue實現圖片懶加載的方法分析

發布時間：2020-09-03 00:15:12 來源：腳本之家閱讀：194 作者：米彩欄目：web開發

本文實例講述了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程序設計有所幫助。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站