In Prototype kann ich ein "Laden ..." Bild mit diesem Code anzeigen:
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,
onLoading: showLoad, onComplete: showResponse} );
function showLoad () {
...
}
In jQuery kann ich eine Serverseite folgendermaßen in ein Element laden:
$('#message').load('index.php?pg=ajaxFlashcard');
Aber wie füge ich diesem Befehl einen Ladespinner hinzu, wie ich es in Prototype getan habe?
jquery
spinner
prototypejs
equivalence
language-interoperability
Edward Tanguay
quelle
quelle
Für jQuery benutze ich
quelle
beforeSend
vor jedem Aufruf aufgerufen wird, währendajaxStart
es nur ausgelöst wird, wenn die erste Ajax-Methode aufgerufen wird. EbensoajaxStop
wird es aufgerufen, wenn der letzte Ajax-Aufruf beendet ist. Wenn Sie mehr als eine Anfrage gleichzeitig haben, funktioniert das Snippet in dieser Antwort nicht richtig.Sie können einfach die
.ajax
Funktion von jQuery verwenden und ihre Option verwendenbeforeSend
und eine Funktion definieren, in der Sie so etwas wie ein Loader-Div anzeigen können. Bei erfolgreicher Option können Sie dieses Loader-Div ausblenden.Sie können jedes Spinning Gif-Bild haben. Hier ist eine Website, die ein großartiger AJAX Loader Generator gemäß Ihrem Farbschema ist: http://ajaxload.info/
quelle
success
wird nicht aufgerufen, wenn ein Fehler auftritt, aber "Sie erhaltencomplete
auch bei synchronen Anforderungen immer einen Rückruf", so jQuery Ajax Events .Sie können das animierte Bild direkt vor dem AJAX-Aufruf in das DOM einfügen und eine Inline-Funktion ausführen, um es zu entfernen ...
Dadurch wird sichergestellt, dass Ihre Animation bei nachfolgenden Anforderungen im selben Frame startet (falls dies wichtig ist). Beachten Sie, dass alte Versionen von IE möglicherweise Probleme mit der Animation haben.
Viel Glück!
quelle
http://docs.jquery.com/Ajax/load#urldatacallback
quelle
Wenn Sie verwenden
$.ajax()
, können Sie Folgendes verwenden:quelle
Verwenden Sie das Lade-Plugin: http://plugins.jquery.com/project/loading
quelle
Variante: Ich habe ein Symbol mit id = "logo" oben links auf der Hauptseite. Wenn Ajax arbeitet, wird ein Spinner-GIF (mit Transparenz) darüber gelegt.
quelle
Am Ende hatte ich zwei Änderungen an der ursprünglichen Antwort .
document
. Dies macht es schwieriger, nur einige der Ajax-Anforderungen zu filtern. Soo ...Dies ist der Code nach diesen Änderungen:
quelle
ajaxComplete
scheint vorzeitig zu feuern, wenn Anfragen erneut versucht werden, daher habe ich eine Kombination ausajaxSend
und verwendetajaxStop
und es funktioniert hervorragend.Ich möchte auch zu dieser Antwort beitragen. Ich suchte nach etwas Ähnlichem in jQuery und das, was ich schließlich benutzte.
Ich habe meinen Ladespinner von http://ajaxload.info/ erhalten . Meine Lösung basiert auf dieser einfachen Antwort unter http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .
Grundsätzlich würden Ihr HTML-Markup und CSS folgendermaßen aussehen:
Und dann würde Ihr Code für jQuery ungefähr so aussehen:
So einfach ist das :)
quelle
Sie können demselben Tag, auf dem Sie später Inhalte mit einem Ajax-Aufruf laden, einfach ein Loader-Image zuweisen:
Sie können das span-Tag auch durch ein Bild-Tag ersetzen.
quelle
Sie können nicht nur globale Standardeinstellungen für Ajax-Ereignisse festlegen, sondern auch das Verhalten für bestimmte Elemente festlegen. Vielleicht würde es ausreichen, nur die Klasse zu wechseln?
Beispiel CSS, um #myForm mit einem Spinner auszublenden:
quelle
Beachten Sie, dass Sie asynchrone Anrufe verwenden müssen, damit Spinner funktionieren (zumindest hat dies dazu geführt, dass meine erst nach dem Ajax-Anruf angezeigt wurden und dann schnell wieder weggingen, da der Anruf beendet war und der Spinner entfernt wurde).
quelle
quelle
Ich habe Folgendes mit jQuery UI Dialog verwendet. (Vielleicht funktioniert es mit anderen Ajax-Rückrufen?)
Das enthält ein animiertes Lade-GIF, bis sein Inhalt ersetzt wird, wenn der Ajax-Aufruf abgeschlossen ist.
quelle
Das ist der beste Weg für mich:
jQuery :
Kaffee :
Dokumente : ajaxStart , ajaxStop
quelle
JavaScript
CSS
quelle
Dies ist ein sehr einfaches und intelligentes Plugin für diesen speziellen Zweck: https://github.com/hekigan/is-loading
quelle
Ich mache das:
quelle
Ich glaube, Du hast recht. Diese Methode ist zu global ...
Dies ist jedoch eine gute Standardeinstellung, wenn Ihr AJAX-Aufruf keine Auswirkungen auf die Seite selbst hat. (Hintergrund speichern zum Beispiel). (Sie können es jederzeit für einen bestimmten Ajax-Aufruf ausschalten, indem Sie "global" übergeben: false - siehe Dokumentation bei jquery
Wenn der AJAX-Aufruf einen Teil der Seite aktualisieren soll, möchte ich, dass meine "Lade" -Bilder spezifisch für den aktualisierten Abschnitt sind. Ich würde gerne sehen, welcher Teil aktualisiert wird.
Stellen Sie sich vor, wie cool es wäre, wenn Sie einfach etwas schreiben könnten wie:
Und dies würde ein "Laden" in diesem Abschnitt anzeigen. Unten ist eine Funktion, die ich geschrieben habe und die auch das "Laden" der Anzeige behandelt, die jedoch spezifisch für den Bereich ist, den Sie in Ajax aktualisieren.
Lassen Sie mich zunächst zeigen, wie man es benutzt
Und dies ist die Funktion - ein grundlegender Start, den Sie nach Belieben verbessern können. es ist sehr flexibel.
quelle
Wenn Sie keinen eigenen Code schreiben möchten, gibt es auch viele Plugins, die genau das tun:
quelle
Wenn Sie vorhaben, bei jeder Serveranforderung einen Loader zu verwenden, können Sie das folgende Muster verwenden.
Dieser Code verwendet insbesondere das Jajaxloader-Plugin (das ich gerade erstellt habe).
https://github.com/lingtalfi/JAjaxLoader/
quelle
Mein Ajax-Code sieht so aus, tatsächlich habe ich gerade async auskommentiert: falsche Zeile und der Spinner wird angezeigt.
Ich zeige den Spinner innerhalb einer Funktion vor dem Ajax-Code:
Für HTML habe ich eine Klasse für großartige Schriftarten verwendet:
<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>
Hoffe es hilft jemandem.
quelle
Sie können jederzeit das Block UI jQuery-Plugin verwenden, das alles für Sie erledigt und sogar die Seite aller Eingaben blockiert, während der Ajax geladen wird. Falls das Plugin anscheinend nicht funktioniert, können Sie in dieser Antwort nachlesen, wie Sie es richtig verwenden können . Hör zu.
quelle