vue實(shí)現(xiàn)圖片懶加載的方法分析
本文實(shí)例講述了vue實(shí)現(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)圖
})
這是一個(gè)最簡(jiǎ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（圖片路徑錯(cuò)誤時(shí)加載圖片） | '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)插件跟頁(yè)面中的動(dòng)畫或過(guò)渡等事件有沖突是， 可以嘗試其他選項(xiàng) |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element （動(dòng)態(tài)修改元素屬性） |
{ } |
Element Adapter |
filter |
the image's listener filter（動(dòng)態(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 |
實(shí)現(xiàn)懶加載，使用v-lazy代替src屬性
<ul> <li v-for="img in list"> <img v-lazy="img.src" > </li> </ul>
對(duì)圖片單獨(dú)進(jìn)行配置
方法1
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }"></div>
方法2
將v-lazy='obj' 賦值一個(gè)對(duì)象
在data里面聲明對(duì)象
可以設(shè)置三個(gè)屬性 src 圖片 loading加載狀態(tài)下的圖片 error錯(cuò)誤狀態(tài)下的圖片
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API
部分項(xiàng)目需要地圖的嵌入，這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-04-04
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語(yǔ)法提示，uniapp代碼提示，代碼自動(dòng)格式化問(wèn)題，對(duì)vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)Vue3版抖音滑動(dòng)插件踩坑指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue頁(yè)面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
今天將從 Vue 的入口文件開始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過(guò)奧2021-09-09
Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04
element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題詳解(二十多行代碼搞定）
大家在使用element-ui的時(shí)候肯定會(huì)遇到這樣一個(gè)問(wèn)題,就是在你使用級(jí)聯(lián)選擇器的回顯問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11