Delay show load gif

Question

Delay show load gif

Navigation

#1 by (1 votes)

0

I have a code in which each time I click on a button it shows me a random word from the list using a code js.

Now I want the word not to be shown instantly, but it takes a few seconds to show the word and while those seconds pass it shows a gif load image . When those seconds are over, the image changes and one is shown, for example, HAS FINISHED!.

How do I schedule that delay in showing 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

javascript html php

asked by Antonio Ángel Estrada Pérez 04.02.2017 в 19:13

source

1 answer

Pass a variable from one form to another PDO form UserDefaults.standard does not work correctly with String variables

score 1 · Accepted Answer

In the click event of the button that makes the AJAX request, you must show the gif. Then, when the word is received from the server, you define a timeout with the seconds you want. When the timeout is executed, you take out 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;
}