首页 > 文章 > web前端 > 构建 Klondike Solitaire 游戏：使用 Vanilla JavaScript 添加简单的图像预加载器

构建 Klondike Solitaire 游戏：使用 Vanilla JavaScript 添加简单的图像预加载器

DDD原创: 2024-10-23 19:44:30981浏览

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中文网其他相关文章！

JavaScript css html if for while try using Length JS default this display https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Compare (diff) two Objects下一篇：Is It Possible to Retrieve Mouse Position Without Mouse Events in JavaScript?

查看更多