imagen Visualización de 'carga' cuando AJAX llamada está en curso

Question

tengo el siguiente jQuery Ajax llamada:

$.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); 
        }); 
        } 
       }); 

Quiero mostrar una imagen cuando la llamada AJAX está en curso. ¿Cómo puedo hacer eso?

Gracias,

Answer 1

intente esto:

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

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

Esto mostrará la imagen de carga cada vez que haga una solicitud de Ajax, he implementado esta div en la parte superior de mis páginas, para que no obstruya con la página, pero siempre se puede ver cuando una llamada ajax va en.

Answer 2

Puede mostrar la imagen justo antes de esta llamada a $ .ajax() y luego ocultar/eliminar la imagen en la función de controlador de entrada (justo antes de su .empty() /. Append (datos) llama

Answer 3

Algo a lo largo de estas líneas (showLoadingImage y hideLoadingImage son de usted):.

// 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(); 
    } 
});