Comment afficher le spinner de chargement en jQuery ?

Question

Sur Prototype Je peux afficher une image "loading..." avec ce code :

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

function showLoad () {
    ...
}

Sur jQuery Je peux charger une page de serveur dans un élément avec ceci :

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

mais comment attacher un spinner de chargement à cette commande comme je l'ai fait dans Prototype ?

Answer 1

Il y a plusieurs façons de procéder. Ma méthode préférée consiste à attacher une fonction aux événements ajaxStart/Stop de l'élément lui-même.

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

Les fonctions ajaxStart/Stop se déclencheront à chaque fois que vous ferez des appels Ajax.

Mise à jour : À partir de jQuery 1.8, la documentation indique que .ajaxStart/Stop ne doivent être attachés qu'à document . Cela transformerait l'extrait ci-dessus en :

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

Answer 2

Pour jQuery, j'utilise

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

Answer 3

Vous pouvez simplement utiliser la fonction jQuery .ajax et utiliser son option beforeSend et définissez une fonction dans laquelle vous pouvez afficher quelque chose comme une division de chargement et, en cas de succès, vous pouvez cacher cette division de chargement.

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

Vous pouvez avoir n'importe quelle image Gif tournante. Voici un site web qui est un excellent générateur de chargeurs AJAX en fonction de votre schéma de couleurs : http://ajaxload.info/

Answer 4

Vous pouvez insérer l'image animée dans le DOM juste avant l'appel AJAX, et faire une fonction en ligne pour la supprimer...

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

Cela permettra de s'assurer que votre animation démarre à la même image lors des requêtes suivantes (si cela est important). Notez que les anciennes versions d'IE pourrait ont des difficultés avec l'animation.

Bonne chance !

Answer 5

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

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

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