Wie erstelle ich einen Spinner oder lade ein Icon mit JQuery?

In diesem Tutorial erstellen wir einen Spinner , das typische Ladesymbol, das wir auf den Websites sehen können, zum Beispiel, wenn wir an einer Anfrage an die Datenbank arbeiten.

spinner1.jpg

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 von entscheidender Bedeutung . Sehen wir uns ein Beispiel an, in dem wir mithilfe von JQuery eine Anforderung an die Google API für Bücher stellen, um die JavaScript-Bücher abzurufen.

HTML-Code

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

 <! DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "font / css / font-awesome.min.css"> <script src = "https://code.jquery.com/jquery-2.2.0.min.js"> </ script> <script src = "script.js"> </ script> <meta charset = "utf-8" /> <title> Laden </ title> </ head> <body> <button id = 'button'> JS-Bücher durchsuchen </ button> <div id = 'data'> </ div> </ body> </ html> 

, veremos después que hace. Wir können in der Kopfzeile sehen, dass ich das Skript mit dem Namen script.js importiere , wir werden später sehen, was es tut. 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 da ist, und es von der offiziellen Fontseite installieren. a través de meta charset . Dann setzen wir die Kodierung der Zeichen in utf-8 durch Meta-Zeichensatz .

In dem Teil des Körpers wurde eine Schaltfläche erstellt, die für die Initiierung der Anforderung an die API zuständig ist, und eine Div, in die wir die Daten einfügen, die uns von der empfangenen Antwort interessieren. Beide haben eine ID, um sie aus unserem Skript verwenden zu können.

See also  So deaktivieren Sie die automatische Übersetzung in Google Chrome

JQuery-Code

Der Code ist nicht sehr kompliziert, wenn Sie an AJAX-Anforderungen mit JQuery gewöhnt sind.

 $ (document) .ready (function () { $ ("# button"). click (function () { $ ('# data'). html ('<center> <i class = "fa fa-spinner fa-impuls fa-3x fa-fw"> </ i> </ center>') $ .ajax ({ URL: "https://www.googleapis.com/books/v1/volumes?q=intitle:javascript" }). done (Funktion (Daten) { sleep (2000) // Wird im Beispiel nur verwendet, um den Spinner länger zu sehen $ ('# data'). html ("") für (var i = 0; i <data.items.length; i ++) { var book = data.items [i] .volumeInfo; var author = libro.authors if (author == undefined) author = "?" $ ('# data'). append ("<div> <h4>" + (i + 1) + ")" + libro.title + "</ h4> - <span> Autor (en):" + author + " </ span> </ div> ") } }); }) }) Funktionsschlaf (Millisekunden) { var start = new Date (). getTime (); while (wahr) { if ((neues Datum (). getTime () - Start)> Millisekunden) brechen; } } 

esto es necesario para que el script cargue cuando nuestro documento HTML esté listo y se “conozcan” los IDs. Der Code kann in $ (document) eingeschlossen werden. Dies ist bereits erforderlich, damit das Skript geladen werden kann, wenn unser HTML-Dokument fertig ist und die IDs “bekannt” sind. Im Inneren können wir sehen, dass wir ein Klickereignis des Buttons hören , wie es zuvor gesagt wurde. Es wird dasjenige sein, das die Anfrage startet.

Sobald das click-Ereignis gestartet ist, müssen Sie als Erstes den Spinner einfügen (wie bereits gesagt, handelt es sich nicht um ein Bild, wenn es hier ein GIF wäre, würden wir das img-Tag einfügen) und dann die AJAX-Anfrage stellen GET- Anforderung, daher geben wir die URL an, unter der sie ausgeführt wird.

, esta parte se va a ejecutar cuando la respuesta de la API termine. Wir sehen die .done , dieser Teil wird ausgeführt, wenn die API-Antwort endet. tenemos una llamada a la función sleep (ésta se ha creado para que el código “espere” 2 segundos más después de recibir respuesta, así podrás apreciar bien el Spinner, esto no habría que ponerlo claro está). Innerhalb der .done haben wir einen Aufruf an die Sleep- Funktion (diese wurde erstellt, damit der Code nach Erhalt einer Antwort noch 2 Sekunden “wartet”, damit Sie den Spinner gut einschätzen können, sollte dies nicht klar sein). Der wichtige Code ist derjenige, der den HTML-Code mit der Daten-ID leert (löscht den Spinner) und ihn in eine Schleife mit den Daten füllt, die er von der API erhält (Daten werden als Parameter übergeben, fertig, es ist die Antwort), um sie zu verwalten Für die Antwort müssen Sie die zurückgegebenen Daten kennen, in diesem Fall wird der Titel der Bücher und der Autor oder die Autoren angezeigt.

Hinweis
, lo que haría es ejecutar el código que contenga en caso de error, pero esa parte se obvia, ya que para este ejemplo no es necesario. Wir könnten auch .fail setzen, was dazu führen würde, dass der darin enthaltene Code im Fehlerfall ausgeführt wird, aber dieser Teil ist offensichtlich, da für dieses Beispiel keine Notwendigkeit besteht. Wenn Sie mehr über die AJAX-Anforderungen in JQuery erfahren möchten, besuchen Sie die folgende Seite oder das folgende Tutorial .

no forma parte, ni es interesante para la carga del icono, pero nos ayuda a ver bien el Spinner se ha agregado, lo único que hace es obtener el tiempo inicial y hacer un bucle infinito hasta que pasen los milisegundos que se inserten como parámetro, entonces se rompe el bucle y la función termina. Die Sleep- Funktion gehört nicht dazu, und es ist auch nicht interessant, das Symbol zu laden. Sie hilft uns jedoch dabei, zu erkennen, ob der Spinner hinzugefügt wurde. Sie erhält lediglich die Anfangszeit und erstellt eine Endlosschleife, bis die Millisekunden verstrichen sind als Parameter wird dann die Schleife unterbrochen und die Funktion beendet.

See also  So installieren und verwenden Sie den Docker-Container unter Ubuntu Linux

Mal sehen, wie der Code funktioniert, wenn wir die Seite öffnen, sehen wir eine einfache Schaltfläche:

execute_spinner_1.jpg

Wenn Sie darauf klicken, erhalten Sie das Spinner- oder Lade-Symbol, das mindestens 2 Sekunden in Aktion gesetzt wird (Sie müssen die Zeit hinzufügen, die für die Anforderung erforderlich ist):

execute_spinner_2.jpg

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

execute_spinner_3.jpg

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

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *