Ich möchte eine Spinning-Circle-Animation "Bitte warten, laden" auf meiner Website platzieren. Wie soll ich das mit jQuery erreichen?
Sie können dies auf verschiedene Arten tun. Es kann subtil sein wie ein kleiner Status auf der Seite mit der Aufschrift "Laden ..." oder so laut wie ein ganzes Element, das die Seite ausgraut, während die neuen Daten geladen werden. Der folgende Ansatz zeigt Ihnen, wie Sie beide Methoden ausführen können.
Beginnen wir mit einer netten "Lade" -Animation von http://ajaxload.info, die ich verwenden werde
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>
Als nächstes geben wir ihm etwas 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;
}
Okay, weiter zur jQuery. Dieser nächste Teil ist eigentlich ganz einfach:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
Das ist es! Wir befestigen einige Ereignisse an dem Körperelement zu jeder Zeit der ajaxStart
oder ajaxStop
Ereignisse ausgelöst werden. Wenn ein Ajax-Ereignis startet, fügen wir dem Körper die Klasse "Laden" hinzu. und wenn Ereignisse abgeschlossen sind, entfernen wir die Klasse "Laden" aus dem Körper.
Sehen Sie es in Aktion: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()
und.ajaxStart()
nur noch an das Dokument angehängt werden. docsIn Bezug auf das tatsächliche Ladebild finden Sie auf dieser Website eine Reihe von Optionen.
Wenn Sie zu Beginn einer Anfrage einen DIV mit diesem Bild anzeigen möchten, haben Sie mehrere Möglichkeiten:
A) Zeigen und verbergen Sie das Bild manuell:
B) Verwenden Sie ajaxStart und ajaxComplete :
Mit dieser Option wird das Element für jede Anforderung ein- / ausgeblendet . Kann je nach Bedarf gut oder schlecht sein.
C) Verwenden Sie einzelne Rückrufe für eine bestimmte Anfrage:
quelle
Zusammen mit dem, was Jonathan und Samir vorgeschlagen haben (beide ausgezeichnete Antworten übrigens!), Hat jQuery einige integrierte Ereignisse, die bei einer Ajax-Anfrage für Sie ausgelöst werden.
Da ist die
ajaxStart
Veranstaltung... und es ist Bruder, das
ajaxStop
EreignisZusammen bieten sie eine gute Möglichkeit, eine Fortschrittsmeldung anzuzeigen, wenn eine Ajax-Aktivität irgendwo auf der Seite stattfindet.
HTML:
Skript:
quelle
.ajaxStart
kann nur an Dokument angehängt werden, dh.$(document).ajaxStart(function(){}).
Sie können ein animiertes GIF eines sich drehenden Kreises von Ajaxload herunterladen - kleben Sie es irgendwo in die Hierarchie Ihrer Website-Datei. Dann müssen Sie nur noch ein HTML-Element mit dem richtigen Code hinzufügen und es entfernen, wenn Sie fertig sind. Das ist ziemlich einfach:
Sie müssen dann nur noch diese Methoden in Ihrem AJAX-Aufruf verwenden:
Dies hat einige Einschränkungen: Wenn Sie zwei oder mehr Stellen haben, an denen das Ladebild angezeigt werden kann, müssen Sie zunächst verfolgen, wie viele Anrufe gleichzeitig ausgeführt werden, und sich nur dann verstecken, wenn sie angezeigt werden alles erledigt. Dies kann mit einem einfachen Zähler erfolgen, der in fast allen Fällen funktionieren sollte.
Zweitens wird das Ladebild nur bei einem erfolgreichen AJAX-Aufruf ausgeblendet. Um die Fehlerzustände zu behandeln, werden Sie in schauen müssen
$.ajax
, was komplexer ist , als$.load
,$.get
und dergleichen, aber viel flexibler zu.quelle
showLoadingImage
Sie einfach an, bevor Sie beginnen undhideLoadingImage
nachdem Sie fertig sind. Sollte ziemlich einfach sein. Möglicherweise müssen Sie einensetTimeout
Anruf tätigen, um sicherzustellen, dass der Browser das neue<img>
Tag tatsächlich rendert. Ich habe einige Fälle gesehen, in denen es nicht stört, bis das JavaScript vollständig ausgeführt wurde.Jonathons hervorragende Lösung bricht in IE8 ab (die Animation wird überhaupt nicht angezeigt). Um dies zu beheben, ändern Sie das CSS in:
quelle
jQuery bietet Ereignis-Hooks für den Beginn und das Ende von AJAX-Anforderungen. Sie können sich in diese einhaken, um Ihren Lader anzuzeigen.
Erstellen Sie beispielsweise das folgende div:
Stellen Sie es
display: none
in Ihren Stylesheets ein. Sie können es so stylen, wie Sie möchten. Wenn Sie möchten, können Sie unter Ajaxload.info ein schönes Ladebild erstellen .Anschließend können Sie Folgendes verwenden, damit es beim Senden von Ajax-Anforderungen automatisch angezeigt wird:
Fügen Sie diesen Javascript-Block einfach am Ende Ihrer Seite hinzu, bevor Sie Ihr Body-Tag schließen oder wo immer Sie es für richtig halten.
Wenn Sie jetzt Ajax-Anfragen senden, wird das
#spinner
div angezeigt. Wenn die Anfrage abgeschlossen ist, wird sie wieder ausgeblendet.quelle
Wenn Sie Turbolinks mit Schienen verwenden, ist dies meine Lösung:
Dies ist das CoffeeScript
Dies ist das SASS CSS, das auf der ersten hervorragenden Antwort von Jonathan Sampson basiert
quelle
Wie Mark H sagte, ist die blockUI der Weg.
Ex.:
Obs.: Ich habe das ajax-loader.gif auf http://www.ajaxload.info/
quelle
Bei allem Respekt vor anderen Posts haben Sie hier eine sehr einfache Lösung mit CSS3 und jQuery, ohne weitere externe Ressourcen oder Dateien zu verwenden.
quelle
Dies würde die Schaltflächen verschwinden lassen, dann würde eine Animation des "Ladens" an ihrer Stelle erscheinen und schließlich nur eine Erfolgsmeldung anzeigen.
quelle
Die meisten Lösungen, die ich gesehen habe, erwarten entweder, dass wir ein Lade-Overlay entwerfen, es ausgeblendet und dann bei Bedarf wieder einblenden oder ein GIF oder Bild usw. anzeigen.
Ich wollte ein robustes Plugin entwickeln, mit dem ich mit einem einfachen jQuery-Aufruf den Ladebildschirm anzeigen und abreißen kann, wenn die Aufgabe abgeschlossen ist.
Unten ist der Code. Es hängt von Font awesome und jQuery ab:
Fügen Sie das Obige einfach in eine js-Datei ein und fügen Sie es in das gesamte Projekt ein.
CSS-Zusatz:
Aufruf:
quelle
Beachten Sie, dass bei Verwendung von ASP.Net MVC mit das
using (Ajax.BeginForm(...
Festlegen vonajaxStart
nicht funktioniert.Verwenden Sie die
AjaxOptions
, um dieses Problem zu beheben:quelle
Laut https://www.w3schools.com/howto/howto_css_loader.asp ist dies ein zweistufiger Prozess ohne JS:
1. Fügen Sie diesen HTML-Code hinzu, wo Sie den Spinner haben möchten:
<div class="loader"></div>
2. Fügen Sie dieses CSS hinzu, um den eigentlichen Spinner zu erstellen:
quelle
$("#loader").toggle();
bevor sie die lang laufende Anforderung zum Starten der Animation stellen und in der Rückruffunktion der Anforderung einen weiteren Aufruf tätigen, um sie auszublenden.Ich benutze CSS3 für die Animation
quelle