Question Comment puis-je créer une animation "Please Wait, Loading ..." en utilisant jQuery?


Je voudrais placer une animation de cercle tournant «s'il vous plaît attendre, chargement» sur mon site. Comment dois-je accomplir cela en utilisant jQuery?


512
2017-12-27 01:10


origine


Réponses:


Vous pourriez faire cela de différentes manières. Il peut s'agir d'un petit statut sur la page indiquant «Chargement en cours», ou d'un élément entier qui grimpe sur la page pendant le chargement des nouvelles données. L'approche que je prends ci-dessous vous montrera comment accomplir les deux méthodes.

La mise en place

Commençons par nous faire une belle animation "loading" de http://ajaxload.info  Je vais utiliser enter image description here 

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

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

Le CSS

Ensuite, donnons-lui un peu de flair:

/* 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
   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 .modal {
    overflow: hidden;   
}

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

Et enfin, le jQuery

D'accord, sur le jQuery. Cette prochaine partie est en fait très simple:

$body = $("body");

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

C'est tout! Nous attachons des événements au corps à tout moment. ajaxStart ou ajaxStop les événements sont tirés. Lorsqu'un événement ajax démarre, nous ajoutons la classe "loading" au corps. et lorsque les événements sont terminés, nous supprimons la classe "loading" du corps.

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


1083
2017-12-27 01:23



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

En ce qui concerne l'affichage d'une DIV avec cette image quand une requête commence, vous avez quelques choix:

A) Afficher et masquer manuellement l'image:

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

B) Utilisation ajaxStart et ajaxComplete:

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

En utilisant ceci l'élément montrera / cachera pour tout demande. Pourrait être bon ou mauvais, selon le besoin.

C) Utiliser des rappels individuels pour une demande particulière:

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

196
2018-04-15 05:03



Avec ce que Jonathan et Samir ont suggéré (les deux excellentes réponses!), JQuery a des événements intégrés qu'il lancera pour vous lorsque vous faites une requête ajax.

Il y a le ajaxStart un événement

Affiche un message de chargement chaque fois qu'une requête AJAX démarre (et qu'aucune n'est déjà active).

... et c'est frère, le ajaxStop un événement

Joindre une fonction à exécuter à la fin de toutes les requêtes AJAX. Ceci est un événement Ajax.

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

HTML:

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

Scénario:

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

103
2017-12-27 03:45



Vous pouvez récupérer un GIF animé d'un cercle tournant Ajaxload - collez-le quelque part dans votre fichier de site Web. Il suffit ensuite d'ajouter un élément HTML avec le code correct 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 alors 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();

Cela a quelques réserves: tout d'abord, si vous avez deux endroits ou plus, l'image de chargement peut être affichée, vous aurez besoin de suivre le nombre d'appels en cours d'exécution et de ne les cacher que lorsqu'ils sont terminé. Cela peut être fait en utilisant un simple compteur, qui devrait fonctionner dans presque tous les cas.

Deuxièmement, cela ne fera que masquer l'image de chargement sur un appel AJAX réussi. Pour gérer les états d'erreur, vous devrez examiner $.ajax, qui est plus complexe que $.load, $.get et similaires, mais beaucoup plus flexible aussi.


17
2017-12-27 01:23



L'excellente solution de Jonathon se décompose en IE8 (l'animation ne s'affiche pas du tout). Pour résoudre ce problème, modifiez le CSS en:

.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;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};

14
2017-08-17 00:46



jQuery fournit des hooks d'événement lorsque les requêtes AJAX commencent et se terminent. Vous pouvez les raccorder pour montrer votre chargeur.

Par exemple, créez le div suivant:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

Réglez-le sur display: none dans vos feuilles de style. Vous pouvez le styler comme vous le souhaitez. Vous pouvez générer une belle image de chargement à Ajaxload.info, si tu veux.

Ensuite, vous pouvez utiliser quelque chose comme le suivant pour le faire apparaître automatiquement lors de l'envoi de requêtes Ajax:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

Ajoutez simplement ce bloc Javascript à la fin de votre page avant la fermeture de votre étiquette de corps ou partout où vous le souhaitez.

Maintenant, chaque fois que vous envoyez des requêtes Ajax, le #spinner div sera montré. Lorsque la demande est terminée, elle sera à nouveau masquée.


6
2017-12-27 03:41



Si vous utilisez Turbolinks With Rails, voici ma solution:

C'est le CoffeeScript

$(window).on 'page:fetch', ->
  $('body').append("<div class='modal'></div>")
  $('body').addClass("loading")

$(window).on 'page:change', ->
  $('body').removeClass("loading")

Ceci est le CSS SASS basé sur la première excellente réponse de Jonathan Sampson

# loader.css.scss

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, 0.4)
            asset-url('ajax-loader.gif', image)
            50% 50% 
            no-repeat;
}
body.loading {
    overflow: hidden;   
}

body.loading .modal {
    display: block;
}

6
2017-10-07 10:14



Comme Mark H, le blockUI est la voie à suivre.

Ex.:

<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI); 

$("#downloadButton").click(function() {

    $("#dialog").dialog({
        width:"390px",
        modal:true,
        buttons: {
            "OK, AGUARDO O E-MAIL!":  function() {
                $.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
                send();
            }
        }
    });
});

function send() {
    $.ajax({
        url: "download-enviar.do",          
        type: "POST",
        blablabla
    });
}
</script>

Obs .: J'ai le ajax-loader.gif sur http://www.ajaxload.info/


5
2018-01-29 08:44



Avec tout le respect dû aux autres posts, vous avez ici une solution très simple, utilisant CSS3 et jQuery, sans utiliser d'autres ressources externes ni fichiers.

$('#submit').click(function(){
  $(this).addClass('button_loader').attr("value","");
  window.setTimeout(function(){
    $('#submit').removeClass('button_loader').attr("value","\u2713");
    $('#submit').prop('disabled', true);
  }, 3000);
});
#submit:focus{
  outline:none;
  outline-offset: none;
}

.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 20px 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-radius: 5px;
    color: #000;
    background-color: #b2b2b2;
    border-color: #969696;
}

.button_loader {
  background-color: transparent;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #969696;
  border-bottom: 4px solid #969696;
  width: 35px;
  height: 35px;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  99% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  99% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submit" class="button" type="submit" value="Submit" />


4
2018-04-09 13:02



notez que lorsque vous utilisez asp.net mvc, avec "using (Ajax.BeginForm (..." le réglage "ajaxStart" ne fonctionnera pas.

utilisez les ajaxotions pour surmonter ce problème:

(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))

3
2018-01-08 13:14



Cela ferait disparaître les boutons, puis une animation de "chargement" apparaîtrait à leur place et finalement afficherait simplement un message de succès.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

3
2018-04-15 05:17