一、懶加載概念解析

簡單來說，懶加載（也稱為延遲加載）是指在實際需求出現(xiàn)時才進(jìn)行資源加載的技術(shù)策略。

具體而言，當(dāng)內(nèi)容或資源尚未處于用戶當(dāng)前可視區(qū)域或交互范圍之內(nèi)時，并不立即加載它們，而是在用戶即將訪問或需要這些資源的時候再進(jìn)行加載。 

二、懶加載的優(yōu)點總結(jié)

• 減輕首頁首次加載負(fù)擔(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è)計的。 

四、懶加載工作原理概述

懶加載的核心在于控制瀏覽器對圖片資源的實際請求時機(jī)。

通常做法是，先將所有圖片元素以統(tǒng)一的占位圖填充，并將真實圖片地址存儲在自定義屬性如"data-url"中。

當(dāng)圖片元素進(jìn)入可視窗口時，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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論