构建 Klondike Solitaire 游戏：使用 Vanilla JavaScript 添加简单的图像预加载器-js教程-PHP中文网

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

DDD

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

原创

1065 人浏览过

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

登录后复制