Afficher l'image de chargement pendant l'exécution de $ .ajax

Je me demande simplement comment afficher une image qui indique que la requête asynchrone est en cours d'exécution. J'utilise le code suivant pour effectuer une requête asynchrone:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

Des idées?

Vous pouvez, bien sûr, l'afficher avant de faire la demande et le masquer une fois terminé:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

Je préfère généralement la solution plus générale de le lier aux événements globaux ajaxStart et ajaxStop, de cette façon, il apparaît pour tous les événements ajax:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Utilisez les fonctions beforeSend et complete de l'objet ajax. Il est préférable d'afficher le gif de l'intérieur beforeSend afin que tout le comportement soit encapsulé dans un seul objet. Faites attention de ne pas cacher le gif en utilisant la fonction de réussite. Si la demande échoue, vous voudrez probablement toujours masquer le gif. Pour ce faire, utilisez la fonction Terminer. Cela ressemblerait à ceci:

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

Code HTML :

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

Code CSS:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

Code JQUERY:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

L '"image" que les gens affichent généralement lors d'un appel ajax est un gif animé. Puisqu'il n'y a aucun moyen de déterminer le pourcentage d'achèvement de la requête ajax, les gifs animés utilisés sont des filateurs indéterminés. C'est juste une image qui se répète encore et encore comme une boule de cercles de différentes tailles. Un bon site pour créer votre propre spinner indéterminé personnalisé est http://ajaxload.info/

Je pense que cela pourrait être mieux si vous avez des tonnes d'appels $ .ajax

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

REMARQUE:

Si vous utilisez CSS. L'élément que vous voulez afficher pendant qu'ajax récupère les données de votre code back-end doit être comme ceci.

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

J'ai toujours aimé le BlockUIplugin: http://jquery.malsup.com/block/

Il vous permet de bloquer certains éléments d'une page, ou la page entière pendant qu'une requête ajax est en cours d'exécution.

Avant votre appel, insérez l'image de chargement dans un div / span quelque part, puis sur la fonction de succès, supprimez cette image. Vous pouvez également configurer une classe css comme le chargement qui pourrait ressembler à ceci

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

Et puis attribuez cette classe à un span / div et effacez-le dans la fonction de réussite

quelque chose comme ça:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

Vous pouvez ajouter un événement de début et de fin ajax, cela fonctionne lorsque vous cliquez sur l'événement de bouton

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

1. Créez un élément de chargement pour, par exemple, un élément avec id = example_load.
2. Cachez-le par défaut en ajoutant style = "display: none;".

3. Montrez-le maintenant en utilisant la fonction jquery show element juste au-dessus de votre ajax.

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });