Display 'carico' immagine quando AJAX chiamata è in corso

Question

Ho la seguente jQuery Ajax chiamata:

$.ajax({ 
        type: "POST", 
        url: "addtobasket.php", 
        data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval, 
        success: function(msg){ 
        $.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" }, 
        function(data){ 
         $('.preorder').empty(); 
         $('.preorder').append(data); 
        }); 
        } 
       }); 

voglio visualizzare un'immagine quando la chiamata AJAX è in corso. Come lo posso fare?

Grazie,

Answer 1

provare questo:

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#loading') 
      .hide() 
      .ajaxStart(function() { 
       $(this).show(); 
      }) 
      .ajaxStop(function() { 
       $(this).hide(); 
      }); 
    }); 
</script> 

<div id="loading"> 
     Loading.... 
</div> 

Questo mostrerà l'immagine di caricamento ogni volta che stai facendo una richiesta di ajax, ho impiantato questo div in cima alle mie pagine, quindi non ostruisce la pagina, ma puoi sempre vedere quando una chiamata ajax sta andando sopra.

Answer 2

È possibile visualizzare l'immagine appena prima di questa chiamata a $ .ajax() e poi nascondere/rimuovere l'immagine nella funzione posta gestore (appena prima del tuo .empty() /. Append (dati) chiama

Answer 3

Qualcosa in questo senso (showLoadingImage e hideLoadingImage sono fino a voi):.

// show the loading image before calling ajax. 
showLoadingImage(); 

$.ajax({ 
    // url, type, etc. go here 
    success: function() { 
     // handle success. this only fires if the call was successful. 
    }, 
    error: function() { 
     // handle error. this only fires if the call was unsuccessful. 
    }, 
    complete: function() { 
     // no matter the result, complete will fire, so it's a good place 
     // to do the non-conditional stuff, like hiding a loading image. 

     hideLoadingImage(); 
    } 
});