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)插件跟頁面中的動畫或過渡等事件有沖突是， 可以嘗試其他選項 |
|
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項目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-04-04
本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動格式化問題，對vscode 開發(fā)uniapp的相關(guān)知識感興趣的朋友一起看看吧2021-08-08
這篇文章主要為大家詳細(xì)介紹了vue驗證碼組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
關(guān)于實現(xiàn)Vue3版抖音滑動插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實現(xiàn)Vue3版抖音滑動插件踩坑指南,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頁面打印自動分頁的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue頁面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧2021-09-09
Vite項目中我們可以手動將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡單實現(xiàn)方法,需要的朋友可以參考下2023-04-04
element-ui動態(tài)級聯(lián)選擇器回顯問題詳解(二十多行代碼搞定）
大家在使用element-ui的時候肯定會遇到這樣一個問題,就是在你使用級聯(lián)選擇器的回顯問題,下面這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)級聯(lián)選擇器回顯問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue中動態(tài)Class的實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11