vue實現(xiàn)圖片懶加載的方法分析

更新時間：2020年02月05日 09:26:48 作者：米彩

這篇文章主要介紹了vue實現(xiàn)圖片懶加載的方法,結(jié)合實例形式分析了vue.js圖片懶加載插件安裝、使用方法與相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了vue實現(xiàn)圖片懶加載的方法。分享給大家供大家參考，具體如下：

vue圖片懶加載使用

首先第一步，安裝插件

vue-lazyload

npm install vue-lazyload --save-dev

在man.js中引入插件

import VueLazyLoad from 'vue-lazyload'

使用

Vue.use(VueLazyLoad,{
error:'', //加載失敗的圖
loading:'' //加載中的默認(rèn)圖
})

這是一個最簡單的配置

官方的詳細(xì)擴(kuò)展配置文檔

key	description	default	options
`preLoad`	proportion of pre-loading height（預(yù)加載高度比例）	`1.3`	`Number`
`error`	src of the image upon load fail（圖片路徑錯誤時加載圖片）	`'data-src'`	`String`
`loading`	src of the image while loading（預(yù)加載圖片）	`'data-src'`	`String`
`attempt`	attempts count（嘗試加載圖片數(shù)量）	`3`	`Number`
`listenEvents`	events that you want vue listen for （想要監(jiān)聽的vue事件）默認(rèn)['scroll']可以省略，當(dāng)插件跟頁面中的動畫或過渡等事件有沖突是，可以嘗試其他選項	`['scroll'（默認(rèn)）,` `'wheel',` `'mousewheel',` `'resize',` `'animationend',` `'transitionend',` `'touchmove']`	Desired Listen Events
`adapter`	dynamically modify the attribute of element （動態(tài)修改元素屬性）	`{ }`	Element Adapter
`filter`	the image's listener filter（動態(tài)修改圖片地址路徑）	`{ }`	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

實現(xiàn)懶加載，使用v-lazy代替src屬性

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

對圖片單獨進(jìn)行配置

方法1

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

方法2

將v-lazy='obj' 賦值一個對象

在data里面聲明對象

可以設(shè)置三個屬性 src 圖片 loading加載狀態(tài)下的圖片 error錯誤狀態(tài)下的圖片

希望本文所述對大家vue.js程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue中混入mixin的用法介紹
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項
2022-10-10
VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)
本文主要介紹了VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
vue select組件的使用與禁用實現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下
2018-04-04
vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下
2023-02-02
詳解vue 計算屬性與方法跟偵聽器區(qū)別(面試考點)
這篇文章主要介紹了詳解vue 計算屬性與方法跟偵聽器區(qū)別(面試考點),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
vue實現(xiàn)購物車的監(jiān)聽
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽事件實現(xiàn)一個簡單購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-04-04
VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個用于保存文件的JavaScript庫,它提供了一種簡單的方式來生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下
2024-05-05
UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法
這篇文章主要介紹了UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
Nuxt.js結(jié)合Serverless構(gòu)建無服務(wù)器應(yīng)用
Nuxt.js是一個基于Vue.js的框架,結(jié)合Serverless架構(gòu),Nuxt.js可以讓你構(gòu)建高度可擴(kuò)展、成本效益高的無服務(wù)器應(yīng)用,具有一定的參考價值,感興趣的可以了解一下
2024-08-08
vue利用sync語法糖實現(xiàn)modal彈框的項目實踐
本文主要介紹了vue利用sync語法糖實現(xiàn)modal彈框的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07