建立 Klondike Solitaire 遊戲：使用 Vanilla JavaScript 添加簡單的圖像預載器

創建流暢的使用者體驗是 Web 開發的首要任務，尤其是當您的網站依賴於大視覺效果時。在開發我的新的閃亮克朗代克紙牌遊戲時，我需要確保卡片圖像以一種感覺自然的方式加載，並且不會讓用戶盯著空白螢幕。因此，我決定添加一個簡單的圖像預載器，它還可以向用戶顯示圖像已載入的量，只使用普通 JavaScript、HTML 和 CSS。我就是這樣做的。

---

第 1 步：基本設定

首先，我創建了一個簡單的文件結構來保持整潔。它看起來是這樣的：

klondike-preloader/
├── index.html
├── styles.css
└── script.js

這樣，我就有了 HTML 結構、樣式和 JavaScript 邏輯的單獨檔案。

第 2 步：建立 HTML 結構

在 HTML 檔案中，我設定了一個按鈕來啟動圖片載入過程，一個進度條來顯示載入的進度，以及一個在圖片準備好後顯示圖片的位置。

索引.html

    <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">


    <button id="load-button">Load Solitaire Image</button>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <div id="image-container">
        <img src="/static/imghwm/default1.png" data-src="script.js" class="lazy" id="image" alt="Klondike Solitaire Card">
    </div>
    <script></script>

第 3 步：設定進度條和佈局的樣式

結構就位後，我開始進行造型。我希望進度條保持隱藏狀態，直到圖片實際開始載入。

樣式.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

現在介紹 JavaScript！這就是我所做的：

1. 觸發圖像載入：點擊按鈕開始載入圖像。
2. 更新了進度條：顯示進度條並在影像載入時調整其寬度。
3. 內容長度不可用時的後備：使用預設大小來計算進度，以防伺服器未提供總大小。

腳本.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 處理。
• 預設大小的後備：即使伺服器沒有傳送檔案大小，也確保進度條正常運作。
• 載入後清理：隱藏進度條並顯示載入的影像。

第五步：測試

編碼後，我使用不同的圖像尺寸對其進行了測試，並調整了預設尺寸以確保它提供了真實的載入體驗。您可以在codepen上嘗試程式碼：https://codepen.io/quantotius/pen/KKOXxqP

---

結論

這就是你得到的！使用 vanilla JavaScript 預先載入映像和改善使用者體驗的基本但有效的方法。非常適合像克朗代克紙牌這樣必須視覺回饋的遊戲。嘗試一下，如果遇到困難，請隨時尋求協助！

以上是建立 Klondike Solitaire 遊戲：使用 Vanilla JavaScript 添加簡單的圖像預載器的詳細內容。更多資訊請關注PHP中文網其他相關文章！