🧙🏽‍♂️ Welcome to the Kingdom of Loadingland!

Once upon a code-time, in a magical land of buttons, browsers, and blazing fast clicks, there was a small but mighty wizard called AJAX. His job? To fetch data from faraway servers without making the page reload! Super cool, right?

But there was a problem… 😟

Every time AJAX went on his mission, the people of the page would just stare at a blank screen wondering:

“Umm, is anything even happening?! Did the site freeze? Should I refresh?! 😩”

And so, the wise developers came up with a brilliant idea — ✨Add a Preloader!✨ A tiny GIF or spinner that says:

“Hey there! AJAX is working behind the scenes. Hold tight!” 🎉

🔧 The Mission: Show a Spinner When Things Load

So, how do we do this as young sorcerers of code? Let’s break it down.

We’re going to:

  1. Build a mini web page with a “Fetch Data” button.
  2. When the button is clicked, we show a loading GIF.
  3. AJAX goes to the server.
  4. Once the data returns, we remove the spinner.

Boom! The user now feels like something is happening. And that’s great UX (User Experience)! 😎

💻 THE PROJECT – AJAX + Preloader

Let’s build this!

✅ 1. HTML (Structure)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX Preloader Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>🧪 Fetch Science Fact</h1>
  <button id="loadBtn">Load Fun Fact</button>
  <div id="result"></div>

  <!-- Preloader will be added via JavaScript -->
  <script src="script.js"></script>
</body>
</html>

✅ 2. CSS (Style)

/* style.css */
body {
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  padding: 30px;
  background-color: #f0f0f0;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

#preloader {
  margin: 20px auto;
  display: block;
  width: 50px;
}

#result {
  margin-top: 20px;
  font-size: 20px;
  color: #333;
}

✅ 3. JavaScript (Magic)

// script.js

function addPreloader() {
  if (!document.getElementById('preloader')) {
    const loader = document.createElement('img');
    loader.src = 'https://i.gifer.com/ZZ5H.gif'; // use your preferred loader
    loader.id = 'preloader';
    document.body.appendChild(loader);
  }
}

function removePreloader() {
  const loader = document.getElementById('preloader');
  if (loader) {
    loader.remove();
  }
}

document.getElementById('loadBtn').addEventListener('click', function () {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState < 4) {
      addPreloader();
    }
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        document.getElementById('result').textContent = JSON.parse(xhr.responseText).text;
      } else {
        document.getElementById('result').textContent = 'Oops! Something went wrong.';
      }
      removePreloader();
    }
  };
  xhr.open('GET', 'https://uselessfacts.jsph.pl/random.json?language=en', true);
  xhr.send();
});

🧠 What’s Happening Behind the Scenes?

  1. addPreloader() creates a spinning GIF and shows it on screen.
  2. We start an AJAX request using XMLHttpRequest.
  3. While waiting, the spinner stays visible.

  4. When the data arrives (readyState == 4 and status == 200), we:

    • Show the data (fun fact!),
    • And call removePreloader() to hide the loader.

🎉 Easy peasy, preloader squeezy!

📚 REVIEW & PRACTICE TIME! 💡

Answer these to see if you got it:

1. What is the purpose of showing a preloader when making an AJAX request? A. To confuse the user B. To slow down the page C. To give visual feedback that something is loading D. To cancel the AJAX request

2. What does readyState == 4 mean in an XMLHttpRequest? A. Request is still being prepared B. Request failed C. Request is completed D. AJAX is not working

3. What function do we call to remove the preloader from the page? A. hideLoader() B. stopLoading() C. removePreloader() D. clearTimeout()

4. Where do we add the preloader in the HTML document using JavaScript? A. Inside the <head> B. Inside the <script> C. To the <body> D. To the <style>

5. If the AJAX request fails, what should the user see? A. A broken image B. A JavaScript error C. A message like “Oops! Something went wrong.” D. Nothing at all

🎉 Final Words from AJAX the Wizard

“Young coder, now you know how to cast the mighty Preloader Spell! Keep your users informed, and may your data always load swiftly!”

<
Previous Post
🧙🏽‍♂️ JS, AJAX, JSON: The Magical Journey of Fetch and JSON; How Webpages Talk to Servers Without Reloading the Whole World
>
Next Post
💡 Python Object: Welcome to the Magical Land of Python; Where Everything Is an Object! 🐍✨