創(chuàng)建流暢的使用者體驗(yàn)是 Web 開(kāi)發(fā)的首要任務(wù)，尤其是當(dāng)您的網(wǎng)站依賴(lài)於大視覺(jué)效果時(shí)。在開(kāi)發(fā)我的新的閃亮克朗代克紙牌遊戲時(shí)，我需要確?？ㄆ瑘D像以一種感覺(jué)自然的方式加載，並且不會(huì)讓用戶(hù)盯著空白螢?zāi)弧Ｒ虼?，我決定添加一個(gè)簡(jiǎn)單的圖像預(yù)載器，它還可以向用戶(hù)顯示圖像已載入的量，只使用普通 JavaScript、HTML 和 CSS。我就是這樣做的。
第 1 步：基本設(shè)定
首先，我創(chuàng)建了一個(gè)簡(jiǎn)單的文件結(jié)構(gòu)來(lái)保持整潔。它看起來(lái)是這樣的：
klondike-preloader/
├── index.html
├── styles.css
└── script.js
這樣，我就有了 HTML 結(jié)構(gòu)、樣式和 JavaScript 邏輯的單獨(dú)檔案。
第 2 步：建立 HTML 結(jié)構(gòu)
在 HTML 檔案中，我設(shè)定了一個(gè)按鈕來(lái)啟動(dòng)圖片載入過(guò)程，一個(gè)進(jìn)度條來(lái)顯示載入的進(jìn)度，以及一個(gè)在圖片準(zhǔn)備好後顯示圖片的位置。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Klondike Solitaire Image Preloader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="load-button">Load Solitaire Image</button>
<div id="progress-bar">
<div id="progress"></div>
</div>
<div id="image-container">
<img id="image" alt="Klondike Solitaire Card" />
</div>
<script src="script.js"></script>
</body>
</html>
第 3 步：設(shè)定進(jìn)度條和佈局的樣式
結(jié)構(gòu)就位後，我開(kāi)始進(jìn)行造型。我希望進(jìn)度條保持隱藏狀態(tài)，直到圖片實(shí)際開(kāi)始載入。
樣式.css
#progress-bar {
width: 100%;
background: lightgray;
margin-bottom: 10px;
height: 20px;
display: none; /* Hidden at first */
}
#progress {
width: 0%;
height: 100%;
background: green;
}
#image-container {
display: none; /* Also hidden initially */
}
#load-button {
margin-bottom: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
第 4 步：新增用於圖像載入的 JavaScript
現(xiàn)在介紹 JavaScript！這就是我所做的：
-
觸發(fā)圖像載入：點(diǎn)擊按鈕開(kāi)始載入圖像。
-
更新了進(jìn)度條：顯示進(jìn)度條並在影像載入時(shí)調(diào)整其寬度。
-
內(nèi)容長(zhǎng)度不可用時(shí)的後備：使用預(yù)設(shè)大小來(lái)計(jì)算進(jìn)度，以防伺服器未提供總大小。
腳本.js
const progressBar = document.getElementById('progress');
const imageContainer = document.getElementById('image-container');
const imageElement = document.getElementById('image');
const loadButton = document.getElementById('load-button');
// Default fallback size in bytes
const DEFAULT_SIZE_BYTES = 500 * 1024; // 500 KB
function loadImage(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
let totalSize = DEFAULT_SIZE_BYTES;
document.getElementById('progress-bar').style.display = 'block';
xhr.onprogress = (event) => {
if (event.lengthComputable) {
totalSize = event.total;
}
const percentComplete = (event.loaded / totalSize) * 100;
progressBar.style.width = percentComplete + '%';
};
xhr.onload = () => {
if (xhr.status === 200) {
const blob = xhr.response;
const objectUrl = URL.createObjectURL(blob);
imageElement.src = objectUrl;
imageContainer.style.display = 'block';
progressBar.parentNode.style.display = 'none';
}
};
xhr.onerror = () => {
console.error('Image loading failed.');
};
xhr.send();
}
loadButton.addEventListener('click', () => {
loadImage('https://example.com/your-image.jpg');
});
要點(diǎn)：
-
使用 XMLHttpRequest 取得映像：使用 onprogress 追蹤進(jìn)度並將映像作為 blob 處理。
-
預(yù)設(shè)大小的後備：即使伺服器沒(méi)有傳送檔案大小，也確保進(jìn)度條正常運(yùn)作。
-
載入後清理：隱藏進(jìn)度條並顯示載入的影像。
第五步：測(cè)試
編碼後，我使用不同的圖像尺寸對(duì)其進(jìn)行了測(cè)試，並調(diào)整了預(yù)設(shè)尺寸以確保它提供了真實(shí)的載入體驗(yàn)。您可以在codepen上嘗試程式碼：https://codepen.io/quantotius/pen/KKOXxqP
結(jié)論
這就是你得到的！使用 vanilla JavaScript 預(yù)先載入映像和改善使用者體驗(yàn)的基本但有效的方法。非常適合像克朗代克紙牌這樣必須視覺(jué)回饋的遊戲。嘗試一下，如果遇到困難，請(qǐng)隨時(shí)尋求協(xié)助！
以上是建立 Klondike Solitaire 遊戲：使用 Vanilla JavaScript 添加簡(jiǎn)單的圖像預(yù)載器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！