Home / Questions / 47773
Accepted
Antonio Ángel Estrada Pérez
Asked: 2020-02-05 10:13:43 +0800 CST 2020-02-05 10:13:43 +0800 CST

Delay show loading gif

  • 772

I have a code in which every time I press a button it shows me a random word from the list through a js code.

Now I want the word not to be displayed instantly, but to take a few seconds to display the word and while those seconds pass, a loading gif image is displayed . When those seconds are over, the image changes and one is shown, for example, YOU ARE FINISHED!.

How do I program that delay in displaying the information?

HTML

        <!-- Gif mientras carga -->
<div id="cocinando">
    <img src="images/cocinando.gif" alt="cocinando" title="Cocinando"/>
    <p>cocinando</p>
</div>

<!-- Muestra la palabra aleatoria -->
<div class="word">
  <span id="wordOutput"></span>
</div>
<button id="randomWordGen">Generate</button>

JS

document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');
    

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'randomwordgen.php');
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            wordOutput.textContent = request.responseText;
            clickTimes++;
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'PALABRA FINAL';
    }
  });
});

RESULT enter image description here

javascript

1 Answers

  1. Best Answer

    In the click event of the button that makes the AJAX request, you must display the gif. Then, when the word is received from the server, you define a timeout with the seconds you want. When the timeout runs, you output the load image.

    document.addEventListener('DOMContentLoaded', function () {
  var clickTimes = 0;
  var loadingImage = document.getElementById('cocinando');
  var btnRandomWord = document.getElementById('randomWordGen');
  var wordOutput = document.getElementById('wordOutput');


  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
      loadingImg.classList.add('visible'); // agrega la clase CSS 'visible'

      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'randomwordgen.php');
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            // se define un timeout de 2.5 segundos (ms)
            window.setTimeout(function () {
              loadingImg.classList.remove('visible');
              wordOutput.textContent = request.responseText;
              clickTimes++;
            }, 2500);
          }
        }
      };
      request.send(); // se envía la petición
    } else {
      wordOutput.textContent = 'PALABRA FINAL';
    }
  });
});

    In your CSS add a couple of rules:

    #cocinando {
  opacity: 0;
  transition: all .25s ease;
  visibility: hidden;
}
#cocinando.visible {
  opacity: 1;
  visibility: visible;
}
    • 1