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

首頁

web前端

js教程

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

DDD

Oct 23, 2024 pm 07:44 PM

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

登入後複製

要點：

使用 XMLHttpRequest 取得映像：使用 onprogress 追蹤進度並將映像作為 blob 處理。
預設大小的後備：即使伺服器沒有傳送檔案大小，也確保進度條正常運作。
載入後清理：隱藏進度條並顯示載入的影像。

第五步：測試

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

結論

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7912

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。