Hoe maak je een Spinner of laadpictogram met JQuery

In deze tutorial wordt creatie van een Spinner, het typische laadpictogram dat we op internet kunnen zien, bijvoorbeeld bij het werken aan een verzoek aan de database.

Het is belangrijk om deze methoden te gebruiken, zodat de gebruiker kan waarderen dat onze pagina werkt en niet denkt dat deze niet werkt, feedback aan de gebruiker is van vitaal belang. We gaan een voorbeeld zien waarin we JQuery zullen gebruiken om een ​​verzoek in te dienen bij de Google API van boeken om JavaScript te verkrijgen.

HTML code

De code van onze HTML zal geen enkele complicatie hebben, je kunt het hieronder zien.

 Zoeken naar JS-boeken laden

We kunnen in de kop zien dat ik het script importeer met de naam script.jsWe zullen later zien wat het doet. We importeren ook JQuery en het lettertype dat zal worden gebruikt om de Spinner te plaatsen, dit is geen afbeelding, het is een pictogram dat er goed uitziet op alle soorten schermen, je kunt zien wat er zijn en het installeren vanaf de officiële fontawesome pagina . Dan zetten we de codering van de karakters in utf-8 via meta-tekenset.

In het lichaamsdeel is een knop gemaakt die verantwoordelijk is voor het starten van het verzoek aan de API en een div waar we de gegevens zullen invoegen die ons interesseren uit het ontvangen antwoord. Beide hebben een id om ze uit ons script te kunnen gebruiken.

JQuery-code

De code is niet ingewikkeld als je gewend bent aan AJAX-verzoeken met JQuery.

 $ (document) .ready (functie () {$ ("#-knop"). klik (functie () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Alleen gebruikt om de spinner langer te zien in het voorbeeld $ ('# 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'). toevoegen ("
"+ (i + 1) +") "+ boek.titel +"
- Auteur / s: "+ auteur +"")}});})}) functie slaap (milliseconden) {var start = nieuwe datum (). getTime (); while (true) {if ((nieuwe datum (). getTime () - start)> milliseconden) pauze;}} 

De code is te zien verpakt door $ (document) .klaar, dit is nodig om het script te laden wanneer ons HTML-document gereed is en de ID's "bekend" zijn. Binnen kunnen we dat zien we horen een gebeurtenis met een klik op de knop, zoals eerder gezegd, zal degene zijn die de petitie zal lanceren.

Een keer klikgebeurtenis is geactiveerd Het eerste dat gedaan wordt, is de Spinner in te voegen (zoals eerder gezegd is het geen afbeelding, als het een gif.webp hier zou zijn, zouden we de img-tag plaatsen), en ga dan verder met het uitvoeren van de Ajax-verzoek, het is een verzoek KRIJGEN, dus we specificeren de URL waar het zal worden gedaan.

We zien de .klaar, wordt dit deel uitgevoerd wanneer het API-antwoord is voltooid. Binnenkant van de .klaar we hebben een aanroep van de functie slaap (Dit is zo gemaakt dat de code nog 2 seconden "wacht" na ontvangst van een reactie, zodat u de Spinner goed kunt waarderen, dit mag niet duidelijk worden gemaakt). De belangrijke code is degene die de html met de id-gegevens leegt (verwijdert de Spinner) en vult deze in een lus met de gegevens die het van de API ontvangt (gegevens worden doorgegeven als een parameter in gereed, is het antwoord), te hanteren Het antwoord moet de gegevens kennen die het retourneert, in dit geval worden de titel van de boeken en hun auteur of auteurs getoond.

OpmerkingWe zouden ook kunnen zetten .mislukking, wat ik zou doen is de code uitvoeren die het bevat in geval van een fout, maar dat deel is overbodig, omdat het voor dit voorbeeld niet nodig is. Als je meer wilt weten over AJAX-verzoeken in JQuery, bezoek dan de volgende pagina of de volgende tutorial.

De functie slaap Het maakt geen deel uit van, en is ook niet interessant voor het laden van het pictogram, maar het helpt ons om goed te zien dat de Spinner is toegevoegd, het enige wat het doet is de initiële tijd verkrijgen en een oneindige lus maken tot de milliseconden die worden ingevoegd als een parameterpas, dan wordt de lus verbroken en eindigt de functie.

Laten we eens kijken hoe de code werkt, wanneer we de pagina openen, zien we een eenvoudige knop:

Wanneer u erop klikt, verschijnt het Spinner- of laadpictogram, dat minimaal 2 seconden in actie zal duren (u moet de tijd toevoegen die het verzoek in beslag neemt):

En aan het einde van het verzoek zal het ons de boeken en hun auteurs laten zien, zoals we hieronder kunnen zien:

OpmerkingDeze techniek kan worden toegepast als u de verzoeken rechtstreeks met JavaScript doet, zonder JQuery te gebruiken, het is om de code aan te passen.

Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven