JavaScript Aggiungi un preloader AJAX

Esempio

Ecco un modo per mostrare un preloader GIF mentre una chiamata AJAX è in esecuzione. Dobbiamo preparare le nostre funzioni di aggiunta e rimozione del preloader:

function addPreloader() {
  // if the preloader doesn't already exist, add one to the page
  if(!document.querySelector('#preloader')) {
    var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
    document.querySelector('body').innerHTML += preloaderHTML;
  }
}

function removePreloader() {
  // select the preloader element
  var preloader = document.querySelector('#preloader');
  // if it exists, remove it from the page
  if(preloader) {
    preloader.remove();
  }
}

Ora stiamo andando a vedere dove usare queste funzioni.

var request = new XMLHttpRequest();

All'interno della funzione onreadystatechange dovresti avere un'istruzione if con condizione: request.readyState == 4 && request.status == 200 .

Se vero : la richiesta è finita e la risposta è pronta è dove utilizzeremo removePreloader() .

Altrimenti se false : la richiesta è ancora in corso, in questo caso eseguiremo la funzione addPreloader()

xmlhttp.onreadystatechange = function() {

  if(request.readyState == 4 && request.status == 200) {
    // the request has come to an end, remove the preloader
    removePreloader();
  } else {
    // the request isn't finished, add the preloader
    addPreloader()
  }

};

xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();