Animation jQuery "Please Wait, Loading..." ?

Question

Je voudrais placer une animation en forme de cercle tournant "Veuillez patienter, chargement" sur mon site. Où puis-je trouver un plugin d'animation JQuery "Please wait, loading" ?

Answer 1

Vous pouvez le faire de différentes manières. Cela peut être aussi subtil qu'un petit statut sur la page disant "Chargement...", ou aussi fort qu'un élément entier qui grise la page pendant le chargement des nouvelles données. L'approche que j'adopte ci-dessous vous montre comment réaliser les deux méthodes.

La mise en place

Commençons par obtenir une belle animation de "chargement" à partir de http://ajaxload.info ( Je vais utiliser http://i.stack.imgur.com/FhHRx.gif ).

Créons un élément que nous pouvons afficher/masquer chaque fois que nous faisons une requête ajax :

<div class="modal"><!-- Place at bottom of page --></div>

Le CSS

Ensuite, nous allons lui donner un peu de style :

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

Et enfin, le jQuery

Très bien, passons à JQuery. La partie suivante est en fait très simple :

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

C'est fait ! Nous attachons des événements à l'élément body à n'importe quel moment de la journée. ajaxStart ou ajaxStop sont déclenchés. Quand un événement ajax commence, nous ajoutons la classe "loading" au corps. et quand les événements sont terminés, nous enlevons la classe "loading" du corps.

Voyez-le en action : http://jsfiddle.net/VpDUG/4952/

Answer 2

En ce qui concerne l'image de chargement, consultez ce site pour un tas d'options.

En ce qui concerne l'affichage d'un DIV avec cette image au début d'une requête, vous avez plusieurs choix :

A) Afficher et masquer manuellement l'image :

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) Utiliser ajaxStart et ajaxComplete :

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

En utilisant ceci, l'élément s'affichera/se cachera pour tout demande. Elle peut être bonne ou mauvaise, selon le besoin.

C) Utiliser des callbacks individuels pour une requête particulière :

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

Answer 3

En plus de ce que Jonathan et Samir ont suggéré (deux excellentes réponses d'ailleurs !), jQuery a quelques événements intégrés qu'il déclenchera pour vous lors d'une requête ajax.

Il y a le ajaxStart événement

Afficher un message de chargement lorsqu'une demande AJAX est lancée (et qu'aucune n'est déjà active).

...et son frère, le ajaxStop événement

Attachez une fonction qui sera exécutée lorsque toutes les demandes AJAX seront terminées. Il s'agit d'un événement Ajax.

Ensemble, ils constituent un excellent moyen d'afficher un message de progression lorsqu'une activité ajax se produit n'importe où sur la page.

HTML :

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

script :

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

Answer 4

Vous pouvez récupérer un GIF animé d'un cercle tournant à partir de Ajaxload - Collez ça quelque part dans la hiérarchie des fichiers de votre site web. Il vous suffit ensuite d'ajouter un élément HTML avec le bon code, et de le supprimer lorsque vous avez terminé. C'est assez simple :

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

Il vous suffit ensuite d'utiliser ces méthodes dans votre appel AJAX :

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

Cette méthode présente quelques inconvénients : tout d'abord, si l'image de chargement peut être affichée à deux endroits ou plus, vous devrez garder la trace du nombre d'appels en cours d'exécution et ne la masquer que lorsqu'ils sont tous terminés. Cela peut être fait en utilisant un simple compteur, qui devrait fonctionner dans presque tous les cas.

Deuxièmement, cela ne masquera l'image de chargement que si l'appel AJAX est réussi. Pour gérer les états d'erreur, vous devrez vous pencher sur les éléments suivants $.ajax qui est plus complexe que $.load , $.get et autres, mais aussi beaucoup plus flexible.

Answer 5

Vous devriez peut-être vous pencher sur le Plugin Throbber pour jQuery .

(Pour l'anecdote, je n'arrive toujours pas à croire que les animations de chargement sont appelées "palpitantes").