Création d'un jeu de solitaire Klondike : ajout d'un préchargeur d'images simple avec Vanilla JavaScript-js tutoriel-php.cn

Création d'un jeu de solitaire Klondike : ajout d'un préchargeur d'images simple avec Vanilla JavaScript

DDD

Libérer： 2024-10-23 19:44:30

original

979 Les gens l'ont consulté

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

Créer une expérience utilisateur fluide est une priorité clé dans le développement Web, surtout lorsque votre site s'appuie sur de grands visuels. Tout en travaillant sur mon nouveau jeu brillant Klondike Solitaire, je devais m'assurer que les images des cartes se chargeaient d'une manière naturelle et ne laissaient pas les utilisateurs regarder un écran vide. J'ai donc décidé d'ajouter un simple préchargeur d'image qui pourrait également montrer aux utilisateurs la quantité d'image chargée, en utilisant uniquement du JavaScript, HTML et CSS vanille. Voici comment j'ai procédé.

Étape 1 : configuration de base

Tout d'abord, j'ai créé une structure de fichiers simple pour garder les choses bien rangées. Voici à quoi cela ressemblait :

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

Copier après la connexion

De cette façon, j'avais des fichiers séparés pour la structure HTML, le style et la logique JavaScript.

Étape 2 : Construire la structure HTML

Dans le fichier HTML, j'ai mis en place un bouton pour démarrer le processus de chargement de l'image, une barre de progression pour indiquer l'état d'avancement du chargement et un endroit pour afficher l'image une fois qu'elle était prête.

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>

Copier après la connexion

Étape 3 : Styliser la barre de progression et la mise en page

Une fois la structure en place, je suis passé au stylisme. Je voulais que la barre de progression reste cachée jusqu'à ce que l'image commence réellement à se charger.

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

Copier après la connexion

Étape 4 : ajout de JavaScript pour le chargement des images

Maintenant, place au JavaScript ! Voici ce que j'ai fait :

Chargement de l'image déclenché : cliquer sur le bouton lance le chargement de l'image.
Mise à jour de la barre de progression : affichage de la barre et ajustement de sa largeur au fur et à mesure du chargement de l'image.
Remplacement lorsque la longueur du contenu n'est pas disponible : utilisation d'une taille par défaut pour calculer la progression au cas où le serveur ne fournirait pas la taille totale.

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

Copier après la connexion

Points clés :

Utilisation de XMLHttpRequest pour récupérer l'image : suivi de la progression avec onprogress et gestion de l'image comme un blob.
Retour à la taille par défaut : garantie que la barre de progression fonctionnait même si le serveur n'envoyait pas la taille du fichier.
Nettoyé après le chargement : masqué la barre de progression et affiché l'image chargée.

Étape 5 : Test

Après le codage, je l'ai testé avec différentes tailles d'image et ajusté la taille par défaut pour m'assurer qu'elle offrait une expérience de chargement réaliste. Vous pouvez essayer le code sur codepen : https://codepen.io/quantotius/pen/KKOXxqP

Conclusion

Et voilà ! Un moyen basique mais efficace de précharger des images et d'améliorer l'expérience utilisateur à l'aide de JavaScript Vanilla. Parfait pour un jeu comme Klondike Solitaire où le retour visuel est indispensable. Essayez-le, et si vous êtes bloqué, n'hésitez pas à demander de l'aide !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!