Comment afficher un indicateur "occupé" avec jQuery?

Question

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

Je souhaite démarrer / arrêter l'indicateur lorsqu'une demande Ajax commence / se termine.

Est-ce vraiment juste une question de montrer / cacher un gif animé, ou y a-t-il une solution plus élégante?

Answer 1

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

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

On remarque, c'est que si vous voulez faire un spécifique requête ajax sans avoir le chargement spinner, vous pouvez le faire comme ceci:

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

Cette manière de dollars l'année précédente.ajaxSetup nous n'auront pas d'incidence sur la demande avec global: false.

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

Answer 2

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

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

Où #loading est l'élément de l'indicateur.

Références:

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

EDIT (2013-01-21): à Partir de la documentation de l'API de jQuery

Comme de jQuery 1.8, cependant, l' .ajaxStop() méthode ne doit être attaché document

Answer 3

J'ai tendance à simplement afficher / masquer un DHCEU, comme d'autres l'ont indiqué. J'ai trouvé un bon site web qui génère des "gifs de chargement"

Lien Je viens de le mettre dans un div et masquer par défaut display: none; (css) puis lorsque vous appelez la fonction afficher l'image, une fois son complète complétée le cacher à nouveau.

Answer 4

Vous pouvez utiliser:

• jQuery-occupé
• Spinner de jQueryin ( démos )

Answer 5

oui, il s’agit simplement de montrer / cacher un gif animé.