Wie kann ich eine "Please Wait, Loading..."-Animation mit jQuery erstellen?

Question

Ich möchte eine "Bitte warten, laden"-Animation mit einem sich drehenden Kreis auf meiner Website platzieren. Wie sollte ich dies mit jQuery zu erreichen?

Answer 1

Sie können dies auf verschiedene Weise tun. Es könnte so subtil sein wie ein kleiner Status auf der Seite, der besagt "Loading...", oder so laut wie ein ganzes Element, das die Seite ausgraut, während die neuen Daten geladen werden. Im Folgenden werde ich Ihnen zeigen, wie Sie beide Methoden anwenden können.

Die Einrichtung

Beginnen wir damit, dass wir eine schöne "Lade"-Animation von http://ajaxload.info Ich werde Folgendes verwenden

Lassen Sie uns ein Element erstellen, das wir jederzeit ein-/ausblenden können, wenn wir eine Ajax-Anfrage stellen:

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

Das CSS

Als Nächstes wollen wir dem Ganzen etwas mehr Flair verleihen:

/* 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;
}

Und schließlich, die jQuery

In Ordnung, auf die jQuery. Dieser nächste Teil ist eigentlich ganz einfach:

$body = $("body");

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

Das war's! Wir hängen einige Ereignisse an das Body-Element an, das jederzeit die ajaxStart o ajaxStop Ereignisse ausgelöst werden. Wenn ein Ajax-Ereignis ausgelöst wird, fügen wir die Klasse "loading" zum Body hinzu, und wenn die Ereignisse abgeschlossen sind, entfernen wir die Klasse "loading" aus dem Body.

Sehen Sie es in Aktion: http://jsfiddle.net/VpDUG/4952/

Answer 2

Was das eigentliche Ladebild anbelangt, Besuchen Sie diese Website für eine Reihe von Optionen.

Was die Anzeige eines DIV mit diesem Bild zu Beginn einer Anfrage betrifft, haben Sie mehrere Möglichkeiten:

A) Manuelles Ein- und Ausblenden des Bildes:

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

B) Verwendung ajaxStart y ajaxComplete :

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

Damit wird das Element ein-/ausgeblendet für tout Anfrage. Das kann gut oder schlecht sein, je nach Bedarf.

C) Verwenden Sie einzelne Rückrufe für eine bestimmte Anfrage:

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

Answer 3

Zusammen mit dem, was Jonathan und Samir vorgeschlagen (beide ausgezeichnete Antworten btw!), hat jQuery einige Ereignisse eingebaut, dass es für Sie Feuer, wenn eine Ajax-Anfrage machen wird.

Da ist die ajaxStart Veranstaltung

Zeigt eine Lademeldung an, wenn eine AJAX-Anfrage startet (und noch keine aktiv ist).

...und sein Bruder, der ajaxStop Veranstaltung

Hängen Sie eine Funktion an, die immer dann ausgeführt wird, wenn alle AJAX-Anfragen beendet sind. Dies ist ein Ajax-Ereignis.

Zusammen bilden sie eine gute Möglichkeit, eine Fortschrittsmeldung anzuzeigen, wenn irgendwo auf der Seite eine Ajax-Aktivität stattfindet.

HTML:

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

Drehbuch:

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

Answer 4

Ein animiertes GIF eines sich drehenden Kreises finden Sie unter Ajaxload - irgendwo in der Dateihierarchie Ihrer Website fest. Dann müssen Sie nur noch ein HTML-Element mit dem richtigen Code hinzufügen und es anschließend wieder entfernen. Das ist ziemlich einfach:

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

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

Sie müssen diese Methoden dann nur noch in Ihrem AJAX-Aufruf verwenden:

$.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();

Dies hat ein paar Einschränkungen: erstens, wenn Sie zwei oder mehr Orte, die das Laden Bild angezeigt werden kann, Sie gehen zu müssen, um zu verfolgen, wie viele Anrufe auf einmal irgendwie ausgeführt werden, und nur ausblenden, wenn sie alle fertig sind. Dies kann mit einem einfachen Zähler getan werden, die für fast alle Fälle funktionieren sollte.

Zweitens wird das Ladebild nur bei einem erfolgreichen AJAX-Aufruf ausgeblendet. Um die Fehlerzustände zu behandeln, müssen Sie sich mit $.ajax die komplexer ist als $.load , $.get und ähnliches, aber auch viel flexibler.

Answer 5

Jonathons ausgezeichnete Lösung funktioniert nicht im IE8 (die Animation wird überhaupt nicht angezeigt). Um dies zu beheben, ändern Sie das CSS in:

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