一、懶加載概念解析

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

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

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

• 減輕首頁(yè)首次加載負(fù)擔(dān)：通過(guò)僅加載可視區(qū)域內(nèi)的必要資源，可顯著降低頁(yè)面初始化時(shí)的請(qǐng)求數(shù)量和數(shù)據(jù)傳輸量，從而有效減少服務(wù)器壓力。
• 提升用戶(hù)體驗(yàn)：在網(wǎng)絡(luò)環(huán)境不佳的情況下，提前用低分辨率的占位圖片替代待加載圖片，可以避免頁(yè)面布局因圖片加載過(guò)程中的空白或堆疊而顯得雜亂無(wú)章，提升視覺(jué)上的流暢度與舒適度。

三、采用懶加載的原因 

設(shè)想一個(gè)包含大量圖片的網(wǎng)頁(yè)，在未使用懶加載技術(shù)時(shí)，所有圖片同時(shí)加載可能導(dǎo)致頁(yè)面響應(yīng)速度極慢，影響用戶(hù)體驗(yàn)。

而借助懶加載方案，初始狀態(tài)下僅加載可視區(qū)域內(nèi)的圖片，其余圖片位置則顯示預(yù)設(shè)的loading圖，當(dāng)圖片滾動(dòng)至可視區(qū)域時(shí)，才觸發(fā)真實(shí)圖片的請(qǐng)求和加載，這樣能極大地改善頁(yè)面性能和流暢度。

Vue.js生態(tài)中的一款流行插件vue-lazyload就是為解決此類(lèi)問(wèn)題而設(shè)計(jì)的。 

四、懶加載工作原理概述

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

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

當(dāng)圖片元素進(jìn)入可視窗口時(shí)，JavaScript會(huì)監(jiān)聽(tīng)到這一事件，并將該元素的"data-url"屬性值賦給src屬性，由此觸發(fā)瀏覽器發(fā)出真正的圖片加載請(qǐng)求，實(shí)現(xiàn)懶加載效果。 

vue2實(shí)現(xiàn)圖片的懶加載

引入Vue-Lazyload

• npm install vue-lazyload --save 

// main.js 文件
import VueLazyload from 'vue-lazyload'
// Vue.use(VueLazyload) //無(wú)配置項(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論