Hvordan lage et spinner- eller lastingikon med JQuery

I denne opplæringen vil opprettelse av en spinner, det typiske lasteikonet som vi kan se på nettet, for eksempel når vi arbeider med en forespørsel til databasen.

Det er viktig å bruke disse metodene slik at brukeren kan forstå at siden vår fungerer og ikke tror at den ikke fungerer, tilbakemelding til brukeren er viktig. Vi kommer til å se et eksempel der vi vil bruke JQuery til å sende en forespørsel til Google API for bøker for å få JavaScript.

HTML -kode

Koden til HTML -koden vår vil ikke ha noen komplikasjoner, du kan se den nedenfor.

 Laster inn Søk JS -bøker

Vi kan se i overskriften at jeg importerer skriptet som heter script.jsVi får se hva det gjør senere. Vi importerer også JQuery og skriften som skal brukes til å sette Spinner, dette er ikke et bilde, det er et ikon som vil se bra ut på alle typer skjermer, du kan se hva det er og installere det fra den offisielle fontawesome siden . Deretter legger vi inn kodingen av karakterene utf-8 via meta tegn.

I kroppsdelen er det opprettet en knapp som skal ha ansvaret for å starte forespørselen til API og en div der vi vil sette inn dataene som interesserer oss fra det mottatte svaret. Begge har en id for å kunne bruke dem fra skriptet vårt.

JQuery -kode

Koden er ikke komplisert hvis du er vant til AJAX -forespørsler med JQuery.

 $ (dokument) .klar (funksjon () {$ ("# knapp"). klikk (funksjon () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Bare brukt til å se spinneren lenger i eksempelet $ ('# 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 / e: " + forfatter +"")}});})}) funksjon sleep (millisekunder) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milliseconds) gå i stykker;}} 

Koden kan sees pakket inn av $ (dokument). klar, dette er nødvendig for at skriptet skal lastes inn når HTML -dokumentet vårt er klart og ID -ene er "kjent". Innvendig kan vi se det vi hører en knapp klikk hendelse, som sagt før, vil være den som lanserer begjæringen.

En gang klikkhendelse blir utløst Det første som er gjort er å sette inn spinneren (som sagt tidligere er det ikke et bilde, hvis det var en gif.webp her ville vi sette img -taggen), og deretter fortsette å utføre AJAX -forespørsel, det er en forespørsel FÅ, så vi spesifiserer nettadressen der det skal gjøres.

Vi ser . gjort, denne delen skal utføres når API -svaret er ferdig. Innsiden av . gjort vi har et anrop til funksjonen sove (Denne er opprettet slik at koden "venter" 2 sekunder til etter at du har mottatt et svar, slik at du kan sette pris på Spinner godt, dette skal ikke gjøres klart). Den viktige koden er den som tømmer HTML -filen som har id -dataene (fjerner spinneren) og fyller den i en sløyfe med dataene den mottar fra API, (data blir sendt som en parameter i gjort, er svaret), å håndtere Svaret må kjenne dataene det returnerer, i dette tilfellet vises tittelen på bøkene og forfatteren eller forfatterne av dem.

MerkVi kunne også sette .fail, det jeg ville gjøre er å utføre koden den inneholder i tilfelle feil, men den delen er unnviket, siden det for dette eksemplet ikke er nødvendig. Hvis du vil vite mer om AJAX -forespørsler i JQuery, kan du besøke følgende side eller den følgende opplæringen.

Funksjonen sove Det er ikke en del av, og det er heller ikke interessant å laste inn ikonet, men det hjelper oss å se godt at spinneren er lagt til, det eneste den gjør er å få den første tiden og lage en uendelig sløyfe til millisekundene som settes inn som et parameterpass, så blir sløyfen brutt og funksjonen avsluttes.

La oss se hvordan koden fungerer, når vi åpner siden ser vi en enkel knapp:

Når du klikker på den, vil Spinner eller lasting -ikonet vises, som vil ta minst 2 sekunder i handling (du må legge til den tiden forespørselen tar):

Og på slutten av forespørselen vil den vise oss bøkene og deres forfattere slik vi kan se nedenfor:

MerkDenne teknikken kan brukes hvis du sender forespørslene direkte med JavaScript, uten å bruke JQuery, det er å tilpasse koden.

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng