建立 Klondike Solitaire 遊戲：使用 Vanilla JavaScript 添加簡單的圖像預載器-js教程-PHP中文網

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

DDD

發布： 2024-10-23 19:44:30

原創

1105 人瀏覽過

Building a Klondike Solitaire Game: Adding a Simple Image Preloader with Vanilla JavaScript

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

第 1 步：基本設定

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

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

登入後複製

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

第 2 步：建立 HTML 結構

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

索引.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 步：設定進度條和佈局的樣式

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

樣式.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！這就是我所做的：

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

腳本.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');
});

登入後複製