So erstellen Sie ein Spinner- oder Ladesymbol mit JQuery

In diesem Tutorial Erstellung eines Spinners, das typische Ladesymbol, das wir im Web sehen können, zum Beispiel bei der Bearbeitung einer Anfrage an die Datenbank.

Es ist wichtig, diese Methoden zu verwenden, damit der Benutzer erkennen kann, dass unsere Seite funktioniert und nicht der Meinung ist, dass sie nicht funktioniert. Feedback an den Benutzer ist wichtig. Wir werden ein Beispiel sehen, in dem wir JQuery verwenden, um eine Anfrage an die Google-API von Büchern zu senden, um das JavaScript zu erhalten.

HTML Quelltext

Der Code unseres HTML-Codes wird keine Komplikationen haben, Sie können ihn unten sehen.

 Laden von Search JS-Büchern

Wir können in der Kopfzeile sehen, dass ich das Skript namens . importiere script.jsWir werden später sehen, was es bewirkt. Wir importieren auch JQuery und die Schriftart, die verwendet wird, um den Spinner zu platzieren. Dies ist kein Bild, es ist ein Symbol, das auf allen Arten von Bildschirmen gut aussieht. Sie können sehen, was es gibt, und es von der offiziellen fontawesome-Seite installieren . Dann setzen wir die Kodierung der Zeichen in utf-8 über Meta-Zeichensatz.

Im Hauptteil wurde eine Schaltfläche erstellt, die dafür verantwortlich ist, die Anfrage an die API zu starten, und ein Div, in das wir die Daten einfügen, die uns aus der erhaltenen Antwort interessieren. Beide haben eine ID, um sie von unserem Skript aus verwenden zu können.

JQuery-Code

Der Code ist nicht kompliziert, wenn Sie AJAX-Anfragen mit JQuery gewohnt sind.

 $ (document) .ready (function () {$ ("# button"). click (function () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Wird im Beispiel nur verwendet, um den Spinner länger zu sehen $ ('# data ' ). html ("") for (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (author == undefined) author = "?" $ ('# data'). append ("
"+ (i + 1) +") "+ Buch.Titel +"
- Autor/en: "+ Autor +"")}});})}) Funktion sleep (Millisekunden) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> Millisekunden) brechen;}} 

Der Code ist umschlossen von . zu sehen $ (Dokument) .bereit, dies ist notwendig, damit das Skript geladen wird, wenn unser HTML-Dokument fertig ist und die IDs "bekannt" sind. Innen können wir das sehen wir hören ein Schaltflächenklick-Ereignis, wie bereits erwähnt, wird die Petition starten.

Einmal Klickereignis wird ausgelöst Das erste, was Sie tun müssen, ist, den Spinner einzufügen (wie bereits erwähnt, ist es kein Bild, wenn es ein Gif.webp wäre, würden wir hier das img-Tag einfügen) und dann fortfahren, die AJAX-Anfrage, es ist eine Anfrage BEKOMMEN, also geben wir die URL an, wo dies geschehen soll.

Wir sehen die .fertig, wird dieser Teil ausgeführt, wenn die API-Antwort abgeschlossen ist. Innerhalb der .fertig Wir haben einen Aufruf an die Funktion Schlaf (Dies wurde so erstellt, dass der Code nach Erhalt einer Antwort noch 2 Sekunden "wartet", damit Sie den Spinner gut einschätzen können, dies sollte nicht klargestellt werden). Der wichtige Code ist derjenige, der den HTML-Code mit den ID-Daten leert (entfernt den Spinner) und ihn in einer Schleife mit den Daten füllt, die er von der API erhält (Daten werden als Parameter in done übergeben, ist die Antwort). Die Antwort muss die Daten kennen, die sie zurückliefert, in diesem Fall werden der Titel der Bücher und deren Autor oder Autoren angezeigt.

NotizWir könnten auch setzen .Scheitern, würde ich im Fehlerfall den darin enthaltenen Code ausführen, aber dieser Teil entfällt, da er für dieses Beispiel nicht erforderlich ist. Wenn Sie mehr über AJAX-Anfragen in JQuery erfahren möchten, besuchen Sie die folgende Seite oder das folgende Tutorial.

Die Funktion Schlaf Es ist weder Teil des Symbols noch interessant für das Laden des Symbols, aber es hilft uns zu sehen, dass der Spinner hinzugefügt wurde eine Parameterübergabe, dann wird die Schleife unterbrochen und die Funktion beendet.

Sehen wir uns an, wie der Code funktioniert. Wenn wir die Seite öffnen, sehen wir eine einfache Schaltfläche:

Wenn Sie darauf klicken, wird das Spinner- oder Ladesymbol angezeigt, was mindestens 2 Sekunden dauert (Sie müssen die Zeit hinzufügen, die die Anfrage dauert):

Und am Ende der Anfrage werden uns die Bücher und ihre Autoren angezeigt, wie wir unten sehen können:

NotizDiese Technik kann angewendet werden, wenn Sie die Anfragen direkt mit JavaScript stellen, ohne JQuery zu verwenden, um den Code anzupassen.

Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben