很久沒有發(fā)文了今天水一篇文章，圖片預(yù)加載且展示加載的進(jìn)度條，在現(xiàn)代的Web開發(fā)中，優(yōu)化用戶體驗(yàn)至關(guān)重要。一種常見的方法是在頁面加載時(shí)預(yù)加載圖片，并展示一個(gè)加載進(jìn)度條，讓用戶了解加載進(jìn)度。在本文中，我們將深入探討如何實(shí)現(xiàn)這兩個(gè)關(guān)鍵功能，以提高網(wǎng)站性能和用戶滿意度，首先談一下我的思路：
創(chuàng)建一個(gè)函數(shù)用于new一個(gè)image對象，遍歷需要預(yù)加載的圖片數(shù)組，設(shè)置圖片的src屬性為傳入的 URL，從而觸發(fā)圖片的加載，在每個(gè)圖片加載成功后，用數(shù)組長度計(jì)算出百分比更新加載進(jìn)度并將加載的圖片添加到頁面上，其中的我有一個(gè)我踩的坑需要注意一下
?
/**
* 圖片預(yù)加載
*/
export function preloadImage(url) {
console.log(url)
return new Promise((resolve, reject) => {
const img = new Image();
img.src = url;
img.onload = () => {
resolve(img);
};
img.onerror = (err) => {
reject(err);
};
});
}
創(chuàng)建了一個(gè)?preloadImage?函數(shù)，它用于加載給定 URL 的圖像。該函數(shù)返回一個(gè) Promise，使異步處理圖圖片加載的成功或失敗。
data() {
return {
loadingProgress: 0, // 圖片加載進(jìn)度
};
},
methods: {
// 預(yù)加載
async preloadImages() {
const imageUrls = [
require('../../static/index/hone-rainbow.png'),
require('../../static/index/hone-bg.png'),
//...你的圖片
];
const totalImages = imageUrls.length;
let loadedImages = 0;
for (const imageUrl of imageUrls) {
try {
await preloadImage(imageUrl);
loadedImages++;
this.loadingProgress = (loadedImages / totalImages) * 100; // 更新進(jìn)度
} catch (error) {
console.error(error);
}
}
// 判斷是否首次訪問，開啟新手指引
this.$nextTick(() => {
this.access()
});
},
},
在?preloadImages?函數(shù)中，定義一個(gè)數(shù)組?imageUrls，其中包含所有需要預(yù)加載的 URL。然后，通過遍歷這個(gè)數(shù)組，使用?preloadImage?函數(shù)來預(yù)加載每個(gè)圖像。在每個(gè)圖像加載成功后，更新加載進(jìn)度并將加載的圖像添加到頁面上，在頁面中我使用了加載進(jìn)度條來展示加載進(jìn)度。進(jìn)度條的百分比由?this.loadingProgress?控制，它在每個(gè)圖片成功加載后被更新。通過監(jiān)聽?loadingProgress?的變化可以實(shí)時(shí)更新進(jìn)度條，還有就是根據(jù)需要通過?try-catch?捕獲可能的加載錯(cuò)誤，在this.$nextTick中進(jìn)行加載完成后需要進(jìn)行的操作，確保是在進(jìn)度條完成后正常運(yùn)行
<!-- 預(yù)加載頁面 -->
<view v-if="loadingProgress!==100" class="loading-main">
<view class="loading-line-progress-box">
<view class="loading-line-progress">
<u-line-progress width="100" height="20" :percentage="loadingProgress" activeColor="#f9a431">
<text class="loading-u-percentage-slot">{{(loadingProgress || 0).toFixed(2)}}%</text>
<image v-if="loadingProgress!==0" class="loading-line-progress-logo"
src="@/static/index/line-progress-logo.png" mode=""></image>
</u-line-progress>
</view>
</view>
</view>
<!-- 主頁面 -->
<view v-else class="content-main">
//加載完成后的頁面
</view>
html的話我這邊使用的是uview的進(jìn)度條組件，這里可以根據(jù)自己項(xiàng)目的需要進(jìn)行調(diào)整，當(dāng)圖片加載完畢loadingProgress為一百時(shí)進(jìn)度條頁面消失展示主頁
接下來記錄一下我做這個(gè)功能踩的坑文章來源：http://www.zghlxwxcb.cn/news/detail-710089.html
const imageUrls = [
'../../static/index/hone-rainbow.png',
'../../static/index/hone-bg.png',
];
剛開始時(shí)我是直接寫圖片的相對路徑，預(yù)加載出來的圖片當(dāng)然就是相對路徑了，可是圖片經(jīng)過uniapp編譯后不僅路徑進(jìn)行了改變，且會添加hash后綴防重名，如此一來之前預(yù)加載的圖片當(dāng)進(jìn)入頁面時(shí)肯定是用不了的瀏覽器會重新加載一次圖片，這里就有兩個(gè)方法解決，第一將圖片放服務(wù)器中進(jìn)行預(yù)加載同時(shí)可以減少前端打包的體積，第二種就是就是通過require包裹始終獲取圖片的真實(shí)路徑，我這邊項(xiàng)目體積并沒有很大所以采用了第二種方法始終獲取圖片的真實(shí)路徑，webpack構(gòu)建工具負(fù)責(zé)將這些引用路徑解析為真實(shí)的文件路徑，因此可以專注于編寫相對路徑，不必?fù)?dān)心最終的部署路徑。文章來源地址http://www.zghlxwxcb.cn/news/detail-710089.html
到了這里，關(guān)于如何實(shí)現(xiàn)圖片預(yù)加載和加載進(jìn)度條的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
