創(chuàng)建流暢的使用者體驗是 Web 開發(fā)的首要任務(wù)，尤其是當您的網(wǎng)站依賴於大視覺效果時。在開發(fā)我的新的閃亮克朗代克紙牌遊戲時，我需要確?？ㄆ瑘D像以一種感覺自然的方式加載，並且不會讓用戶盯著空白螢?zāi)?。因此，我決定添加一個簡單的圖像預(yù)載器，它還可以向用戶顯示圖像已載入的量，只使用普通 JavaScript、HTML 和 CSS。我就是這樣做的。
第 1 步：基本設(shè)定
首先，我創(chuàng)建了一個簡單的文件結(jié)構(gòu)來保持整潔。它看起來是這樣的：
klondike-preloader/
├── index.html
├── styles.css
└── script.js
這樣，我就有了 HTML 結(jié)構(gòu)、樣式和 JavaScript 邏輯的單獨檔案。
第 2 步：建立 HTML 結(jié)構(gòu)
在 HTML 檔案中，我設(shè)定了一個按鈕來啟動圖片載入過程，一個進度條來顯示載入的進度，以及一個在圖片準備好後顯示圖片的位置。
索引.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è)定進度條和佈局的樣式
結(jié)構(gòu)就位後，我開始進行造型。我希望進度條保持隱藏狀態(tà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ào)整其寬度。
-
內(nèi)容長度不可用時的後備：使用預(yù)設(shè)大小來計算進度，以防伺服器未提供總大小。
腳本.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');
});
要點：
-
使用 XMLHttpRequest 取得映像：使用 onprogress 追蹤進度並將映像作為 blob 處理。
-
預(yù)設(shè)大小的後備：即使伺服器沒有傳送檔案大小，也確保進度條正常運作。
-
載入後清理：隱藏進度條並顯示載入的影像。
第五步：測試
編碼後，我使用不同的圖像尺寸對其進行了測試，並調(diào)整了預(yù)設(shè)尺寸以確保它提供了真實的載入體驗。您可以在codepen上嘗試程式碼：https://codepen.io/quantotius/pen/KKOXxqP
結(jié)論
這就是你得到的！使用 vanilla JavaScript 預(yù)先載入映像和改善使用者體驗的基本但有效的方法。非常適合像克朗代克紙牌這樣必須視覺回饋的遊戲。嘗試一下，如果遇到困難，請隨時尋求協(xié)助！
以上是建立 Klondike Solitaire 遊戲：使用 Vanilla JavaScript 添加簡單的圖像預(yù)載器的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！