369 votes

Comment montrer le chargement spinner en jQuery?

Dans le Prototype , je peux montrer un "chargement..." de l'image avec ce code:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

En jQuery, je peux charger une page de serveur dans un élément avec ceci:

$('#message').load('index.php?pg=ajaxFlashcard');

mais comment dois-je joindre un chargement spinner pour cette commande que j'ai fait dans le Prototype?

744voto

nickf Points 185423

il ya un couple de façons. Mon préféré consiste à associer une fonction à la ajaxStart/Stop événements sur l'élément lui-même.

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Le ajaxStart/fonctions d'Arrêt se déclenche lorsque vous effectuez des appels ajax.

Mise à jour: jQuery 1.8, la documentation, .ajaxStart/Stop ne doit être attaché à l' document. Cela aurait pour effet de transformer l'extrait ci-dessus:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

194voto

kr00lix Points 2056

Pour jQuery je utiliser

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

32voto

PHPSeeker Points 532

Vous pouvez simplement utiliser l'Ajax de Jquery fonction et l'utiliser à son gré beforeSend et de définir une fonction dans laquelle vous pouvez afficher quelque chose comme chargeur de div et sur le succès de l'option, vous pouvez masquer le loader div voici un peu de code pour vous faire comprendre:

jQuery.ajax({
                   type: "POST",
                   url: 'YOU_URL_TO_WHICH_DATA_SEND',
                   data:'YOUR_DATA_TO_SEND',
                   beforeSend: function(){
                       $("#loaderDiv").show();
                   },
                   success: function(data)
                   {
                         $("#loaderDiv").hide();

                   }
           });

Hope qui aide dans le loader div vous pouvez avoir toute la Filature image Gif voici un site web qui est un grand Ajax Loader Générateur selon votre Schéma de Couleur : http://ajaxload.info/

22voto

Josh Stodola Points 42410

Vous pouvez insérer l'image animée dans les DOM juste avant l'appel AJAX, et de faire une fonction en ligne de l'enlever...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Ce sera assurez-vous que votre animation démarre à la même image sur les demandes ultérieures (si ce qui compte). Notez que les anciennes versions d'IE peut avoir des difficultés avec l'animation.

Bonne chance!

20voto

UltimateBrent Points 6167
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: