Heim > Artikel > Web-Frontend > Erstellen eines Klondike Solitaire-Spiels: Hinzufügen eines einfachen Bild-Preloaders mit Vanilla-JavaScript

Erstellen eines Klondike Solitaire-Spiels: Hinzufügen eines einfachen Bild-Preloaders mit Vanilla-JavaScript

DDDOriginal: 2024-10-23 19:44:30981Durchsuche

Building a Klondike Solitaire Game: Adding a Simple Image Preloader with Vanilla JavaScript

Die Schaffung eines reibungslosen Benutzererlebnisses hat bei der Webentwicklung oberste Priorität, insbesondere wenn Ihre Website auf große visuelle Elemente angewiesen ist. Während ich an meinem neuen glänzenden Klondike Solitaire-Spiel arbeitete, musste ich sicherstellen, dass die Kartenbilder auf eine natürliche Weise geladen wurden und die Benutzer nicht auf einen leeren Bildschirm starrten. Deshalb habe ich beschlossen, einen einfachen Bild-Preloader hinzuzufügen, der den Benutzern auch anzeigen kann, wie viel des Bildes geladen wurde, und dazu ausschließlich Vanilla-JavaScript, HTML und CSS verwendet. So habe ich es gemacht.

Schritt 1: Grundeinrichtung

Das Wichtigste zuerst: Ich habe eine einfache Dateistruktur erstellt, um für Ordnung zu sorgen. So sah es aus:

klondike-preloader/
├── index.html
├── styles.css
└── script.js

Auf diese Weise hatte ich separate Dateien für die HTML-Struktur, das Styling und die JavaScript-Logik.

Schritt 2: Aufbau der HTML-Struktur

In der HTML-Datei habe ich eine Schaltfläche zum Starten des Bildladevorgangs, einen Fortschrittsbalken, der anzeigt, wie weit der Ladevorgang fortgeschritten ist, und eine Stelle eingerichtet, an der das Bild angezeigt wird, sobald es fertig ist.

index.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>

Schritt 3: Gestalten Sie den Fortschrittsbalken und das Layout

Nachdem die Struktur vorhanden war, ging ich zum Styling über. Ich wollte, dass der Fortschrittsbalken ausgeblendet bleibt, bis das Bild tatsächlich geladen wird.

Styles.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;
}

Schritt 4: JavaScript zum Laden von Bildern hinzufügen

Jetzt zum JavaScript! Folgendes habe ich getan:

Ausgelöstes Laden des Bildes: Durch Klicken auf die Schaltfläche wird das Laden des Bildes gestartet.
Fortschrittsbalken aktualisiert: Zeigte den Balken an und passte seine Breite an, während das Bild geladen wurde.
Fallback für den Fall, dass die Inhaltslänge nicht verfügbar ist: Verwendet eine Standardgröße, um den Fortschritt zu berechnen, falls der Server nicht die Gesamtgröße bereitstellt.

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

Kernpunkte:

XmlHttpRequest zum Abrufen des Bildes verwendet: Fortschritt mit onprogress verfolgt und das Bild als Blob behandelt.
Fallback für Standardgröße: Es wurde sichergestellt, dass der Fortschrittsbalken auch dann funktioniert, wenn der Server die Dateigröße nicht gesendet hat.
Nach dem Laden aufgeräumt: Der Fortschrittsbalken wurde ausgeblendet und das geladene Bild angezeigt.

Schritt 5: Testen

Nach dem Codieren habe ich es mit verschiedenen Bildgrößen getestet und die Standardgröße angepasst, um sicherzustellen, dass es ein realistisches Ladeerlebnis bietet. Sie können den Code auf Codepen ausprobieren: https://codepen.io/quantotius/pen/KKOXxqP

Abschluss

Und da haben Sie es! Eine einfache, aber effektive Möglichkeit, Bilder vorab zu laden und das Benutzererlebnis mit Vanilla-JavaScript zu verbessern. Perfekt für ein Spiel wie Klondike Solitaire, bei dem visuelles Feedback ein Muss ist. Probieren Sie es aus und wenn Sie nicht weiterkommen, fragen Sie einfach um Hilfe!

Das obige ist der detaillierte Inhalt vonErstellen eines Klondike Solitaire-Spiels: Hinzufügen eines einfachen Bild-Preloaders mit Vanilla-JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie man zwei Objekte vergleicht (vergleicht).Nächster Artikel：Wie man zwei Objekte vergleicht (vergleicht).

In Verbindung stehende Artikel

Mehr sehen