Cum se creează un spinner sau se încarcă pictograma cu JQuery

În acest tutorial crearea unui Spinner, pictograma tipică de încărcare pe care o putem vedea pe web, de exemplu atunci când lucrăm la o cerere către baza de date.

Este important să utilizați aceste metode, astfel încât utilizatorul să poată aprecia că pagina noastră funcționează și nu crede că nu funcționează, feedback-ul către utilizator este vital. Vom vedea un exemplu în care vom folosi JQuery pentru a face o cerere către Google API de cărți pentru a obține JavaScript.

Cod HTML

Codul HTML-ului nostru nu va avea nicio complicație, îl puteți vedea mai jos.

 Se încarcă căutarea cărților JS

Putem vedea în antet că am importat scriptul numit script.jsVom vedea mai târziu ce face. De asemenea, importăm JQuery și fontul care vor fi utilizate pentru a pune Spinner, aceasta nu este o imagine, este o pictogramă care va arăta bine pe toate tipurile de ecrane, puteți vedea ce există și instalați-o din pagina oficială . Apoi punem codarea personajelor în utf-8 prin intermediul meta charset.

În partea corpului, a fost creat un buton care va fi însărcinat cu pornirea cererii către API și un div în care vom insera datele care ne interesează din răspunsul primit. Ambele au un id pentru a le putea folosi din scriptul nostru.

Cod JQuery

Codul nu este complicat dacă sunteți obișnuiți cu solicitările AJAX cu JQuery.

 $ (document). ready (function () {$ ("# button"). click (function () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (funcție (date) {sleep (2000) // Se folosește numai pentru a vedea spinnerul mai mult în exemplul $ ('# 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 +"
- Autor / i: „+ autor +”")}});})}) funcție sleep (milisecunde) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milisecunde) pauză;}} 

Codul poate fi văzut înfășurat de $ (document). gata, acest lucru este necesar pentru ca scriptul să se încarce când documentul nostru HTML este gata și ID-urile sunt „cunoscute”. În interior putem vedea asta auzim un eveniment cu clic pe buton, așa cum am spus anterior, va fi cel care va lansa petiția.

O dată evenimentul de clic este declanșat Primul lucru care se face este să introduceți Spinner-ul (așa cum am spus anterior nu este o imagine, dacă ar fi un gif.webp aici am pune eticheta img), și apoi continuați să efectuați Cerere AJAX, este o cerere OBȚINE, așa că specificăm adresa URL unde va fi realizată.

Vedem .Terminat, această parte va fi executată când se termină răspunsul API. În interiorul .Terminat avem un apel la funcție dormi (Acest lucru a fost creat astfel încât codul să „aștepte” încă 2 secunde după ce a primit un răspuns, astfel încât să puteți aprecia bine Spinner, acest lucru nu trebuie clarificat). Codul important este cel care golește html-ul care are datele id (elimină Spinner-ul) și îl umple într-o buclă cu datele pe care le primește de la API, (datele sunt transmise ca parametru în terminat, este răspunsul), să se ocupe Răspunsul trebuie să cunoască datele pe care le returnează, în acest caz sunt afișate titlul cărților și autorul sau autorii acestora.

NotăAm putea pune și noi .esu, ceea ce aș face este să execut codul pe care îl conține în caz de eroare, dar acea parte este înlăturată, deoarece pentru acest exemplu nu este necesar. Dacă doriți să aflați mai multe despre cererile AJAX în JQuery vizitați pagina următoare sau următorul tutorial.

Functia dormi Nu face parte și nici nu este interesant pentru încărcarea pictogramei, dar ne ajută să vedem bine că Spinner a fost adăugat, singurul lucru pe care îl face este să obțină timpul inițial și să facă o buclă infinită până la milisecundele care sunt inserate ca un parametru trece, apoi bucla este ruptă și funcția se termină.

Să vedem cum funcționează codul, când deschidem pagina, vedem un simplu buton:

Când faceți clic pe acesta, va apărea pictograma Spinner sau de încărcare, care va dura cel puțin 2 secunde în acțiune (va trebui să adăugați timpul pe care îl solicită solicitarea):

Și la sfârșitul cererii, ne va arăta cărțile și autorii lor, după cum putem vedea mai jos:

NotăAceastă tehnică poate fi aplicată dacă faceți solicitările direct cu JavaScript, fără a utiliza JQuery, este să adaptați codul.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv