✅ Kako napraviti Spinner ili ikonu učitavanja s JQueryjem

Sadržaj

HTML kod
JQuery kôd

U ovom vodiču stvaranje Spinnera, tipična ikona učitavanja koju možemo vidjeti na webu, na primjer pri radu na zahtjevu za bazu podataka.

Važno je koristiti ove metode kako bi korisnik uvidio da naša stranica radi i da ne misli da ne radi, povratna informacija korisniku je od vitalnog značaja. Vidjet ćemo primjer u kojem ćemo koristiti JQuery za slanje zahtjeva google API -ju knjiga za dobivanje JavaScripta.

HTML kod

Kod našeg HTML -a neće imati nikakvih komplikacija, možete ga vidjeti ispod.

 Učitavanje Pretraživanje JS knjiga

U zaglavlju možemo vidjeti da uvozim skriptu zvanu script.jsPoslije ćemo vidjeti što će učiniti. Također uvozimo JQuery i font koji će se koristiti za stavljanje Spinnera, ovo nije slika, to je ikona koja će izgledati dobro na svim vrstama zaslona, možete vidjeti što postoji i instalirati je sa službene stranice fontawesome . Zatim stavljamo kodiranje znakova utf-8 preko metaznak.

U dijelu tijela stvoren je gumb koji će biti zadužen za pokretanje zahtjeva za API -jem i div u koji ćemo umetnuti podatke koji nas zanimaju iz primljenog odgovora. Obojica imaju identifikacijski broj koji ih može koristiti iz naše skripte.

JQuery kôd

Kôd nije kompliciran ako ste navikli na AJAX zahtjeve s JQueryjem.

 $ (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) // Koristi se samo za duži prikaz spinnera u primjeru $ ('# data') ). html ("") za (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 +"
- Autor / i: " + autor +"")}});})}) funkcija sleep (u milisekundama) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milliseconds) pauza;}}

Kôd se može vidjeti zapakiran $ (dokument) .spremna, to je potrebno za učitavanje skripte kada je naš HTML dokument spreman i ID -ovi su "poznati". Unutra to možemo vidjeti čujemo događaj klika na gumb, kako je već rečeno, peticija će biti pokrenuta.

Jednom događaj klika je pokrenut Prvo što treba učiniti je umetnuti Spinner (kao što je ranije rečeno, to nije slika, da je ovdje gif.webp stavili bismo oznaku img), a zatim nastavili izvođenje AJAX zahtjev, to je zahtjev DOBITI, pa određujemo URL gdje će se to učiniti.

Vidimo .gotovo, ovaj dio će se izvršiti kada API odgovor završi. Unutar .gotovo imamo poziv funkciji spavati (Ovo je stvoreno tako da kôd "čeka" još 2 sekunde nakon primitka odgovora, tako da možete dobro cijeniti Spinner, to ne bi trebalo biti jasno). Važan kôd je onaj koji isprazni html koji ima id podatke (uklanja Spinner) i ispunjava ga u petlji podacima koje prima od API -ja (podaci se prosljeđuju kao parametar gotov, odgovor je), za rukovanje Odgovor mora znati podatke koje vraća, u ovom slučaju prikazan je naslov knjiga i njihov autor ili autori.

BilješkaMogli bismo i staviti .iznevjeriti, ono što bih učinio je izvršiti kôd koji sadrži u slučaju pogreške, ali taj je dio zaobiđen, jer za ovaj primjer to nije potrebno. Ako želite saznati više o AJAX zahtjevima u JQueryju, posjetite sljedeću stranicu ili sljedeći vodič.

Funkcija spavati Nije dio, niti je zanimljiv za učitavanje ikone, ali pomaže nam da dobro vidimo da je Spinner dodan, jedino što čini je dobiti početno vrijeme i napraviti beskonačnu petlju do milisekundi koje su umetnute kao parametar prolazi, tada se petlja prekida i funkcija završava.

Pogledajmo kako kod funkcionira, kada otvorimo stranicu vidimo jednostavan gumb:

Kada kliknete na nju, pojavit će se Spinner ili ikona učitavanja, što će potrajati najmanje 2 sekunde u akciji (morat ćete dodati vrijeme potrebno za zahtjev):