web-dev-qa-db-fra.com

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

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

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

Des idées?

javascriptjquerycss
93
Artjom Zabelin

Vous pouvez bien sûr le montrer avant de faire la demande et le cacher après avoir 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 consistant à le lier aux événements globaux ajaxStart et ajaxStop. Ainsi, il apparaît pour tous les événements ajax:

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

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

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

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

}
14
sumityadavbadli

"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 de complétion de la demande ajax, les gifs animés utilisés sont des filateurs indéterminés. Ceci 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 disque indéterminé sur mesure est http://ajaxload.info/

7
jEremyB

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 souhaitez afficher pendant que 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 */
}
3
The Terrible Child

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

Il vous permet de bloquer certains éléments d'une page ou la totalité de la page lorsqu'une requête ajax est en cours d'exécution.

3
matt

Avant votre appel, insérez l'image de chargement dans un div/span quelque part, puis supprimez cette image avec la fonction de succès. Sinon, vous pouvez 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 ensuite assignez cette classe à un span/div et effacez-la dans la fonction success

1
Vadim

Vous pouvez ajouter un événement ajax start et complete, c’est un travail que vous devez faire lorsque vous cliquez sur le bouton event

 $(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');
        });
0
Roshan Vishwakarma

quelque chose comme ça:

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

**strong text**Set the Time out to the ajax calls
function testing(){
    
    $("#load").css("display", "block");
    setTimeout(function(){
    $.ajax({
             type: "GET",

          
             url:testing.com,
            
             async: false,
             
             success : function(response){
           
             alert("connection established");

              
            },
            complete: function(){
            alert("sended");
            $("#load").css("display", "none");
         
           },
            error: function(jqXHR, exception) {
                       alert("Write error Message Here");
                  },


       });
     },5000);


  }
  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
<div id="load" style="display: none" class="loader"></div>
<input type="button"  onclick="testing()"  value="SUBMIT" >

0
Narendra Reddy