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();
This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0
This website is not affiliated with Stack Overflow
Email: tutorialpedia@outlook.com