vue2和vue3實(shí)現(xiàn)圖片懶加載方式
一、懶加載概念解析
簡(jiǎn)單來(lái)說(shuō)，懶加載（也稱為延遲加載）是指在實(shí)際需求出現(xiàn)時(shí)才進(jìn)行資源加載的技術(shù)策略。
具體而言，當(dāng)內(nèi)容或資源尚未處于用戶當(dāng)前可視區(qū)域或交互范圍之內(nèi)時(shí)，并不立即加載它們，而是在用戶即將訪問(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ù)器壓力。
- 提升用戶體驗(yàn)：在網(wǎng)絡(luò)環(huán)境不佳的情況下，提前用低分辨率的占位圖片替代待加載圖片，可以避免頁(yè)面布局因圖片加載過(guò)程中的空白或堆疊而顯得雜亂無(wú)章，提升視覺(jué)上的流暢度與舒適度。
三、采用懶加載的原因
設(shè)想一個(gè)包含大量圖片的網(wǎng)頁(yè)，在未使用懶加載技術(shù)時(shí)，所有圖片同時(shí)加載可能導(dǎo)致頁(yè)面響應(yīng)速度極慢，影響用戶體驗(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就是為解決此類問(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue虛擬Dom到真實(shí)Dom的轉(zhuǎn)換，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要介紹了在vue里添加好看的lottie動(dòng)畫效果的方法，在vue中引入lottie非常簡(jiǎn)單,需要的朋友可以參考下2018-08-08
watch就是當(dāng)值第一次綁定的時(shí)候，是不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)的，只有值誕生改變才會(huì)執(zhí)行。如果需要在第一次綁定的時(shí)候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來(lái)的No認(rèn)知時(shí)，也需要執(zhí)行函數(shù)2023-01-01
本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法
下面小編就為大家分享一篇vue 路由頁(yè)面之間實(shí)現(xiàn)用手指進(jìn)行滑動(dòng)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨跟隨小編過(guò)來(lái)看看吧2018-02-02
應(yīng)用provide與inject刷新Vue頁(yè)面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁(yè)面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪2021-09-09
vue3中獲取dom元素和操作實(shí)現(xiàn)方法
ref是Vue3中一個(gè)非常重要的功能,它可以用來(lái)獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,下面這篇文章主要給大家介紹了關(guān)于vue3中獲取dom元素和操作實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue.js實(shí)現(xiàn)h5機(jī)器人聊天（測(cè)試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測(cè)試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考價(jià)值,需要的朋友可以參考下2020-03-03
vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過(guò)prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案,需要的朋友可以參考下2022-12-12