vue2和vue3實現(xiàn)圖片懶加載方式
更新時間：2024年04月24日 14:50:46 作者：Summer不禿
這篇文章主要介紹了vue2和vue3實現(xiàn)圖片懶加載方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、懶加載概念解析
簡單來說，懶加載（也稱為延遲加載）是指在實際需求出現(xiàn)時才進行資源加載的技術(shù)策略。
具體而言，當(dāng)內(nèi)容或資源尚未處于用戶當(dāng)前可視區(qū)域或交互范圍之內(nèi)時，并不立即加載它們，而是在用戶即將訪問或需要這些資源的時候再進行加載。
二、懶加載的優(yōu)點總結(jié)
- 減輕首頁首次加載負擔(dān)：通過僅加載可視區(qū)域內(nèi)的必要資源，可顯著降低頁面初始化時的請求數(shù)量和數(shù)據(jù)傳輸量，從而有效減少服務(wù)器壓力。
- 提升用戶體驗：在網(wǎng)絡(luò)環(huán)境不佳的情況下，提前用低分辨率的占位圖片替代待加載圖片，可以避免頁面布局因圖片加載過程中的空白或堆疊而顯得雜亂無章，提升視覺上的流暢度與舒適度。
三、采用懶加載的原因
設(shè)想一個包含大量圖片的網(wǎng)頁，在未使用懶加載技術(shù)時，所有圖片同時加載可能導(dǎo)致頁面響應(yīng)速度極慢，影響用戶體驗。
而借助懶加載方案，初始狀態(tài)下僅加載可視區(qū)域內(nèi)的圖片，其余圖片位置則顯示預(yù)設(shè)的loading圖，當(dāng)圖片滾動至可視區(qū)域時，才觸發(fā)真實圖片的請求和加載，這樣能極大地改善頁面性能和流暢度。
Vue.js生態(tài)中的一款流行插件vue-lazyload就是為解決此類問題而設(shè)計的。
四、懶加載工作原理概述
懶加載的核心在于控制瀏覽器對圖片資源的實際請求時機。
通常做法是，先將所有圖片元素以統(tǒng)一的占位圖填充，并將真實圖片地址存儲在自定義屬性如"data-url"中。
當(dāng)圖片元素進入可視窗口時，JavaScript會監(jiān)聽到這一事件，并將該元素的"data-url"屬性值賦給src屬性，由此觸發(fā)瀏覽器發(fā)出真正的圖片加載請求，實現(xiàn)懶加載效果。
vue2實現(xiàn)圖片的懶加載
引入Vue-Lazyload
- npm install vue-lazyload --save
// main.js 文件
import VueLazyload from 'vue-lazyload'
// Vue.use(VueLazyload) //無配置項
// 配置項
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, //圖片加載失敗時顯示的圖片
attempt: 1, // 加載錯誤后最大嘗試次數(shù)
})使用
<img v-lazy="imgData"/>
data() {
return {
imgData: '圖片地址'
}
}vue3實現(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";
// 配置項
createApp(App).use(lazyPlugin, {
error: errImg,// 加載錯誤的圖片
loading: loadImg, // 加載時的圖片
})使用
具體使用同vue2
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue虛擬Dom到真實Dom的轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要介紹了在vue里添加好看的lottie動畫效果的方法，在vue中引入lottie非常簡單,需要的朋友可以參考下2018-08-08
watch就是當(dāng)值第一次綁定的時候，是不會執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會執(zhí)行。如果需要在第一次綁定的時候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的No認(rèn)知時，也需要執(zhí)行函數(shù)2023-01-01
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
下面小編就為大家分享一篇vue 路由頁面之間實現(xiàn)用手指進行滑動的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨跟隨小編過來看看吧2018-02-02
應(yīng)用provide與inject刷新Vue頁面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進步，祝大家早日升職加薪2021-09-09
ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點,從而實現(xiàn)對DOM節(jié)點的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)h5機器人聊天測試版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
VUE實現(xiàn)Studio管理后臺之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實現(xiàn)Studio管理后臺之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的工作或?qū)W習(xí)具有一定的參考價值,需要的朋友可以參考下2020-03-03
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案,需要的朋友可以參考下2022-12-12