スムーズなユーザー エクスペリエンスを作成することは、特にサイトが大規(guī)模なビジュアルに依存している場(chǎng)合、Web 開発における重要な優(yōu)先事項(xiàng)です。新しい光沢のあるクロンダイク ソリティア ゲームに取り組んでいる間、カード畫像が自然にロードされ、ユーザーが空白の畫面を見つめたままにならないようにする必要がありました。そこで、バニラの JavaScript、HTML、CSS のみを使用して、畫像がどのくらい読み込まれたかをユーザーに表示できる、シンプルな畫像プリローダーを追加することにしました。私がやった方法は次のとおりです。
ステップ 1: 基本セットアップ
まず最初に、物事を整理整頓するために単純なファイル構(gòu)造を作成しました。それは次のようになります:
klondike-preloader/
├── index.html
├── styles.css
└── script.js
このようにして、HTML 構(gòu)造、スタイル、JavaScript ロジックに個(gè)別のファイルを用意しました。
ステップ 2: HTML 構(gòu)造の構(gòu)築
HTML ファイルで、畫像の読み込みプロセスを開始するボタン、読み込みの進(jìn)行狀況を示す進(jìn)行狀況バー、準(zhǔn)備ができたら畫像を表示するスポットを設(shè)定しました。
インデックス.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: プログレスバーとレイアウトのスタイルを設(shè)定する
構(gòu)造が整ったので、スタイリングに移ります。実際に畫像の読み込みが始まるまで、進(jìn)行狀況バーを非表示にしたかったのです。
スタイル.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 です。私がやったことは次のとおりです:
-
トリガーによる畫像の読み込み: ボタンをクリックすると畫像の読み込みが開始されます。
-
進(jìn)行狀況バーを更新しました: バーを表示し、畫像のロードに応じて幅を調(diào)整しました。
-
コンテンツの長(zhǎng)さが利用できない場(chǎng)合のフォールバック: サーバーが合計(jì)サイズを提供しなかった場(chǎng)合に備えて、デフォルトのサイズを使用して進(jìn)行狀況を計(jì)算します。
スクリプト.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 で進(jìn)行狀況を追跡し、畫像を BLOB として処理しました。
-
デフォルト サイズのフォールバック: サーバーがファイル サイズを送信しなかった場(chǎng)合でも、進(jìn)行狀況バーが機(jī)能するようにしました。
-
読み込み後にクリーンアップされました: 進(jìn)行狀況バーを非表示にし、読み込まれた畫像を表示しました。
ステップ 5: テスト
コーディング後、さまざまな畫像サイズでテストし、デフォルトのサイズを調(diào)整して、現(xiàn)実的な読み込みエクスペリエンスが提供されることを確認(rèn)しました。 codepen でコードを試すことができます: https://codepen.io/quantotius/pen/KKOXxqP
結(jié)論
これで完成です!バニラ JavaScript を使用して畫像をプリロードし、ユーザー エクスペリエンスを向上させる、基本的かつ効果的な方法です。視覚的なフィードバックが必須となるクロンダイク ソリティアのようなゲームに最適です。試してみて、行き詰まったら、遠(yuǎn)慮なく助けを求めてください!
以上がクロンダイク ソリティア ゲームの構(gòu)築: バニラ JavaScript を使用したシンプルなイメージ プリローダーの追加の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。