✅ Sådan laver du et Spinner- eller indlæserikon med JQuery

Indholdsfortegnelse

HTML -kode
JQuery -kode

I denne vejledning vil oprettelse af en Spinner, det typiske lastningsikon, som vi kan se på internettet, for eksempel når vi arbejder på en anmodning til databasen.

Det er vigtigt at bruge disse metoder, så brugeren kan forstå, at vores side fungerer og ikke tror, at den ikke fungerer, feedback til brugeren er afgørende. Vi kommer til at se et eksempel, hvor vi vil bruge JQuery til at fremsætte en anmodning til google API for bøger om at få JavaScript.

HTML -kode

Koden til vores HTML vil ikke have nogen komplikationer, du kan se den herunder.

 Indlæser Søg efter JS -bøger

Vi kan se i overskriften, at jeg importerer det script, der hedder script.jsVi får se, hvad det gør senere. Vi importerer også JQuery og den skrifttype, der skal bruges til at sætte Spinner, dette er ikke et billede, det er et ikon, der vil se godt ud på alle typer skærme, du kan se, hvad der er og installere det fra den officielle skrifttype fantastisk . Derefter satte vi kodningen af tegnene ind utf-8 via meta tegnsæt.

I kropsdelen er der blevet oprettet en knap, der skal stå for at starte anmodningen til API'et og en div, hvor vi vil indsætte de data, der interesserer os fra det modtagne svar. Begge har et id til at kunne bruge dem fra vores script.

JQuery -kode

Koden er ikke kompliceret, hvis du er vant til AJAX -anmodninger med JQuery.

 $ (dokument) .ready (funktion () {$ ("# knap"). klik på (funktion () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (funktion (data) {sleep (2000) // Kun brugt til at se spinneren længere i eksemplet $ ('# 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) +") " + book.title +"
- Forfatter / r: " + forfatter +"")}});})}) funktion sleep (millisekunder) {var start = ny dato (). getTime (); mens (sand) {if ((ny dato (). getTime () - start)> millisekund) pause;}}

Koden kan ses pakket ind af $ (dokument). klar, dette er nødvendigt for at scriptet kan indlæses, når vores HTML -dokument er klar, og ID'erne er "kendte". Indeni kan vi se det vi hører et knap klik begivenhed, som sagt før, vil være den, der lancerer andragendet.

En gang klikhændelse udløses Den første ting, der gøres, er at indsætte Spinner (som tidligere sagt er det ikke et billede, hvis det var en gif.webp her ville vi sætte img -tagget) og derefter fortsætte med at udføre AJAX anmodning, det er en anmodning FÅ, så vi angiver webadressen, hvor det skal gøres.

Vi ser .Færdig, denne del udføres, når API -svaret er færdigt. Inde i .Færdig vi har et opkald til funktionen søvn (Dette er blevet oprettet, så koden "venter" 2 sekunder mere efter at have modtaget et svar, så du kan sætte pris på Spinner godt, dette skal ikke gøres klart). Den vigtige kode er den, der tømmer den html, der har id -dataene (fjerner Spinner) og fylder den i en loop med dataene, den modtager fra API'en (data sendes som en parameter i udført, er svaret), at håndtere Svaret skal kende de data, det returnerer, i dette tilfælde vises titlen på bøgerne og deres forfatter eller forfattere.

BemærkVi kunne også sætte .svigte, hvad jeg ville gøre er at udføre den kode, den indeholder i tilfælde af fejl, men den del er undværet, da det i dette eksempel ikke er nødvendigt. Hvis du vil vide mere om AJAX -anmodninger i JQuery, kan du besøge den følgende side eller den følgende vejledning.

Funktionen søvn Det er ikke en del af, og det er heller ikke interessant at indlæse ikonet, men det hjælper os med at se godt, at Spinner er tilføjet, det eneste, det gør, er at få den første tid og lave en uendelig sløjfe, indtil de millisekunder, der indsættes som et parameterpass, så sløjfen brydes, og funktionen slutter.

Lad os se, hvordan koden fungerer, når vi åbner siden, ser vi en simpel knap: