Membina Permainan Solitaire Klondike: Menambah Pramuat Imej Mudah dengan JavaScript Vanila

Mencipta pengalaman pengguna yang lancar ialah keutamaan utama dalam pembangunan web, terutamanya apabila tapak anda bergantung pada visual yang besar. Semasa mengerjakan permainan Klondike Solitaire berkilat baharu saya, saya perlu memastikan bahawa imej kad dimuatkan dalam cara yang dirasakan semula jadi dan tidak membuatkan pengguna merenung skrin kosong. Jadi, saya memutuskan untuk menambah pramuat imej ringkas yang juga boleh menunjukkan kepada pengguna berapa banyak imej yang telah dimuatkan, menggunakan apa-apa selain JavaScript, HTML dan CSS vanila. Begini cara saya melakukannya.

---

Langkah 1: Persediaan Asas

Perkara pertama dahulu, saya mencipta struktur fail ringkas untuk memastikan keadaan sentiasa kemas. Begini rupanya:

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

Dengan cara ini, saya mempunyai fail berasingan untuk struktur HTML, penggayaan dan logik JavaScript.

Langkah 2: Membina Struktur HTML

Dalam fail HTML, saya menyediakan butang untuk memulakan proses pemuatan imej, bar kemajuan untuk menunjukkan sejauh mana pemuatan itu dan tempat untuk memaparkan imej setelah ia sedia.

index.html

    <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">


    <button id="load-button">Load Solitaire Image</button>
    <div id="progress-bar">
        <div id="progress"></div>
    </div>
    <div id="image-container">
        <img src="/static/imghwm/default1.png" data-src="script.js" class="lazy" id="image" alt="Klondike Solitaire Card">
    </div>
    <script></script>

Langkah 3: Menggayakan Bar Kemajuan dan Reka Letak

Dengan struktur sedia ada, saya beralih kepada penggayaan. Saya mahu bar kemajuan kekal tersembunyi sehingga imej benar-benar mula dimuatkan.

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

Langkah 4: Menambah JavaScript untuk Memuatkan Imej

Sekarang untuk JavaScript! Inilah yang saya lakukan:

1. Pemuatan Imej Tercetus: Mengklik butang mula memuatkan imej.
2. Mengemas kini Bar Kemajuan: Menunjukkan bar dan melaraskan lebarnya semasa imej dimuatkan.
3. Sambung untuk Apabila Panjang Kandungan Tidak Tersedia: Menggunakan saiz lalai untuk mengira kemajuan sekiranya pelayan tidak memberikan jumlah saiz.

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

Perkara Utama:

• Menggunakan XMLHttpRequest untuk Mengambil Imej: Menjejak kemajuan dengan onprogress dan mengendalikan imej sebagai gumpalan.
• Fallback untuk Saiz Lalai: Memastikan bar kemajuan berfungsi walaupun pelayan tidak menghantar saiz fail.
• Dibersihkan Selepas Memuat: Sembunyikan bar kemajuan dan tunjukkan imej yang dimuatkan.

Langkah 5: Menguji

Selepas pengekodan, saya mengujinya dengan saiz imej yang berbeza dan melaraskan saiz lalai untuk memastikan ia memberikan pengalaman pemuatan yang realistik. Anda boleh mencuba kod pada codepen: https://codepen.io/quantotius/pen/KKOXxqP

---

Kesimpulan

Dan begitulah! Cara asas, namun berkesan untuk pramuat imej dan meningkatkan pengalaman pengguna menggunakan JavaScript vanila. Sesuai untuk permainan seperti Klondike Solitaire yang memerlukan maklum balas visual. Cubalah, dan jika anda buntu, sila minta bantuan!

Atas ialah kandungan terperinci Membina Permainan Solitaire Klondike: Menambah Pramuat Imej Mudah dengan JavaScript Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!