クロンダイクソリティアゲームの構築: バニラ JavaScript を使用したシンプルなイメージプリローダーの追加-jsチュートリアル-php.cn

クロンダイクソリティアゲームの構築: バニラ JavaScript を使用したシンプルなイメージプリローダーの追加

DDD

リリース： 2024-10-23 19:44:30

オリジナル

1080 人が閲覧しました

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

ログイン後にコピー