vue2和vue3實(shí)現(xiàn)圖片懶加載方式
一、懶加載概念解析
簡單來說，懶加載（也稱為延遲加載）是指在實(shí)際需求出現(xiàn)時(shí)才進(jìn)行資源加載的技術(shù)策略。
具體而言，當(dāng)內(nèi)容或資源尚未處于用戶當(dāng)前可視區(qū)域或交互范圍之內(nèi)時(shí)，并不立即加載它們，而是在用戶即將訪問或需要這些資源的時(shí)候再進(jìn)行加載。
二、懶加載的優(yōu)點(diǎn)總結(jié)
- 減輕首頁首次加載負(fù)擔(dān)：通過僅加載可視區(qū)域內(nèi)的必要資源，可顯著降低頁面初始化時(shí)的請求數(shù)量和數(shù)據(jù)傳輸量，從而有效減少服務(wù)器壓力。
- 提升用戶體驗(yàn)：在網(wǎng)絡(luò)環(huán)境不佳的情況下，提前用低分辨率的占位圖片替代待加載圖片，可以避免頁面布局因圖片加載過程中的空白或堆疊而顯得雜亂無章，提升視覺上的流暢度與舒適度。
三、采用懶加載的原因
設(shè)想一個(gè)包含大量圖片的網(wǎng)頁，在未使用懶加載技術(shù)時(shí)，所有圖片同時(shí)加載可能導(dǎo)致頁面響應(yīng)速度極慢，影響用戶體驗(yàn)。
而借助懶加載方案，初始狀態(tài)下僅加載可視區(qū)域內(nèi)的圖片，其余圖片位置則顯示預(yù)設(shè)的loading圖，當(dāng)圖片滾動(dòng)至可視區(qū)域時(shí)，才觸發(fā)真實(shí)圖片的請求和加載，這樣能極大地改善頁面性能和流暢度。
Vue.js生態(tài)中的一款流行插件vue-lazyload就是為解決此類問題而設(shè)計(jì)的。
四、懶加載工作原理概述
懶加載的核心在于控制瀏覽器對圖片資源的實(shí)際請求時(shí)機(jī)。
通常做法是，先將所有圖片元素以統(tǒng)一的占位圖填充，并將真實(shí)圖片地址存儲(chǔ)在自定義屬性如"data-url"中。
當(dāng)圖片元素進(jìn)入可視窗口時(shí)，JavaScript會(huì)監(jiān)聽到這一事件，并將該元素的"data-url"屬性值賦給src屬性，由此觸發(fā)瀏覽器發(fā)出真正的圖片加載請求，實(shí)現(xiàn)懶加載效果。
vue2實(shí)現(xiàn)圖片的懶加載
引入Vue-Lazyload
- npm install vue-lazyload --save
// main.js 文件
import VueLazyload from 'vue-lazyload'
// Vue.use(VueLazyload) //無配置項(xiàng)
// 配置項(xiàng)
const loadimage = require('@/assets/img/loading.gif')
const errorimage = require('@/assets/img/error.gif')
Vue.use(VueLazyload, {
preLoad: 1.3, //預(yù)加載的寬高比
loading: loadimage, //圖片加載狀態(tài)下顯示的圖片
error: errorimage, //圖片加載失敗時(shí)顯示的圖片
attempt: 1, // 加載錯(cuò)誤后最大嘗試次數(shù)
})使用
<img v-lazy="imgData"/>
data() {
return {
imgData: '圖片地址'
}
}vue3實(shí)現(xiàn)圖片的懶加載
引入vue3-lazy
- npm install vue3-lazy --save
// main.js 文件
import lazyPlugin from 'vue3-lazy';
import errImg from "@/assets/img/errImg.jpg";
import loadImg from "@/assets/img/loadImg.jpg";
// 配置項(xiàng)
createApp(App).use(lazyPlugin, {
error: errImg,// 加載錯(cuò)誤的圖片
loading: loadImg, // 加載時(shí)的圖片
})使用
具體使用同vue2
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
端午將至，大家都開始吃粽子了么？本文將用vite2與vue3開發(fā)出一個(gè)招財(cái)貓小游戲，在圖案不停滾動(dòng)的同時(shí)選出可以轉(zhuǎn)出不同的素材最終得到粽子獎(jiǎng)勵(lì)，康康你能用多少次才會(huì)轉(zhuǎn)出自己喜愛口味的粽子吧2022-05-05
Vue+Microapp實(shí)現(xiàn)微前端的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)以vite+vue3+Microapp為主應(yīng)用，以vue2+element為子應(yīng)用的微前端，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-06-06
vue watch監(jiān)聽變量值的實(shí)時(shí)變動(dòng)示例詳解
這篇文章主要介紹了vue 監(jiān)聽變量值的實(shí)時(shí)變動(dòng) watch,使用字符串形式的偵聽器函數(shù),還有一種是使用函數(shù)形式的偵聽器函數(shù),本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中的axios和proxy代理的相關(guān)知識，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-03-03
這篇文章主要介紹了使用watch監(jiān)聽對象里面值的變化，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作
這篇文章主要介紹了vue-cli或vue項(xiàng)目利用HBuilder打包成移動(dòng)端app操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
vue+elementUI的表格最后一行合計(jì)自定義顯示方式
這篇文章主要介紹了vue+elementUI的表格最后一行合計(jì)自定義顯示方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個(gè)Vue項(xiàng)目的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
VUE設(shè)置和清除定時(shí)器的方式及遇到的問題
?最近需要再頁面里做個(gè)倒計(jì)時(shí),發(fā)現(xiàn)用clearInterval()清除定時(shí)器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時(shí)器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10