Comment afficher un indicateur "occupé" avec jQuery?

Question

Comment afficher un indicateur "occupé" en rotation à un point spécifique d'une page Web?

Je veux démarrer/arrêter l'indicateur lorsqu'une requête Ajax démarre/se termine.

S'agit-il simplement de montrer/cacher un gif animé, ou existe-t-il une solution plus élégante?

Answer 1

Vous pouvez simplement montrer/cacher un gif, mais vous pouvez aussi l'incorporer à ajaxSetup, donc il est appelé sur chaque requête ajax.

$.ajaxSetup({ 
    beforeSend:function(){ 
     // show gif here, eg: 
     $("#loading").show(); 
    }, 
    complete:function(){ 
     // hide gif here, eg: 
     $("#loading").hide(); 
    } 
}); 

Une note est que si vous voulez faire une demande ajax spécifique sans avoir la fileuse de chargement, vous pouvez le faire comme ceci:

$.ajax({ 
    global: false, 
    // stuff 
}); 

De cette façon, la précédente $ .ajaxSetup nous a volonté n'affecte pas la demande avec global: false.

Plus de détails disponibles à: http://api.jquery.com/jQuery.ajaxSetup

Answer 2

oui, c'est vraiment juste une question de montrer/cacher un gif animé.

Answer 3

Je l'ai fait dans mon projet,

faire une div avec le dos url sol gif, ce qui est rien d'autre que l'animation gif

<div class="busyindicatorClass"> </div> 

.busyindicatorClass 
{ 
background-url///give animation here 
} 

dans votre appel ajax, ajoutez cette classe à la div et dans le succès d'ajax enlever la classe.

ça va faire l'affaire.

laissez-moi savoir si vous avez besoin antthing d'autre, je peux vous donner plus de détails

dans le succès ajax Effacez la classe

success: function(data) { 
    remove class using jquery 
    } 

Answer 4

je tends juste afficher/masquer une IMG que d'autres ont déclaré. J'ai trouvé un bon site web qui génère « chargement gifs »

Link je l'ai mis dans un div et cache par défaut display: none; (css), puis lorsque vous appelez la fonction afficher l'image, une fois que sa peau complète à nouveau.

Answer 5

La documentation jQuery recommande de faire quelque chose comme ce qui suit:

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}).ajaxStop(function() { 
    $("#loading").hide(); 
}); 

Où #loading est l'élément avec votre indicateur occupé en elle.

Références:

• http://api.jquery.com/ajaxStart/

• http://api.jquery.com/ajaxStop/

• En outre, jQuery.ajaxSetup API recommande explicitement éviter jQuery.ajaxSetup pour ces:

  Remarque: Les fonctions de rappel globales devraient être mis à leur Aja global respectif x méthodes de gestionnaire d'événement - .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend() - plus que dans l'objet options pour $.ajaxSetup().

Answer 6

Je l'ai fait dans mon projet:

Global Events dans application.js:

$(document).bind("ajaxSend", function(){ 
    $("#loading").show(); 
}).bind("ajaxComplete", function(){ 
    $("#loading").hide(); 
}); 

"chargement" est l'élément pour afficher et masquer!

Références: http://api.jquery.com/Ajax_Events/

Answer 7

je devais utiliser

HTML: 
    <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" /> 

In script file: 
    // invoked when sending ajax request 
    $(document).ajaxSend(function() { 
     $("#loading").show(); 
    }); 

    // invoked when sending ajax completed 
    $(document).ajaxComplete(function() { 
     $("#loading").hide(); 
    }); 

Answer 8

fil vieux, mais je voulais mettre à jour depuis que je travaille aujourd'hui sur ce problème, i na pas avoir jquery dans mon projet si je l'ai fait il l'ancienne javascript plaine, je également nécessaire pour bloquer le contenu à l'écran si dans mon xhtml

<img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/> 

dans mon javascript

document.getElementsByClassName('myclass').style.opacity = '0.7' 
    document.getElementById('loading').style.display = "block"; 

Answer 9

Pour étendre la solution de Rodrigo un peu - pour les demandes qui sont exécutées fréquemment, vous voudrez peut-être seulement pour afficher l'image de chargement si la demande prend plus d'un intervalle de temps minimum, sinon l'image être continuellement surgir et disparaître rapidement

var loading = false; 

$.ajaxSetup({ 
    beforeSend: function() { 
     // Display loading icon if AJAX call takes >1 second 
     loading = true; 
     setTimeout(function() { 
      if (loading) { 
       // show loading image 
      } 
     }, 1000);    
    }, 
    complete: function() { 
     loading = false; 
     // hide loading image 
    } 
});