Afficher l'image de chargement pendant que $ .ajax est exécuté

Question

Je me demande juste 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 ?

Answer 1

Vous pouvez, bien sûr, le montrer avant de faire la demande, et le masquer une fois qu'elle est terminée :

$('#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 mondiaux 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();
});

Answer 2

Utilisez les fonctions beforeSend et complete de l'objet ajax. Il est préférable de montrer le gif de l'intérieur beforeSend pour que tout le comportement soit encapsulé dans un seul objet. Faites attention à ne pas masquer le gif à l'aide de la fonction de succès. Si la demande échoue, vous voudrez probablement toujours masquer le gif. Pour ce faire, utilisez la fonction Complet. Il ressemblerait à ceci :

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

Answer 3

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%;
}

JQUERY Code :

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

}

Answer 4

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

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

REMARQUE :

Si vous utilisez CSS. L'élément que vous souhaitez afficher lorsque ajax récupère des données à partir 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 */
}

Answer 5

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