✅ Kā izveidot vērpšanas vai ielādes ikonu, izmantojot JQuery

Satura rādītājs

HTML kods
JQuery kods

Šajā apmācībā ,. vērpēja izveide, tipiskā ielādes ikona, ko mēs varam redzēt tīmeklī, piemēram, strādājot pie datu bāzes pieprasījuma.

Ir svarīgi izmantot šīs metodes, lai lietotājs varētu novērtēt, ka mūsu lapa darbojas, un nedomātu, ka tā nedarbojas, atgriezeniskā saite lietotājam ir ļoti svarīga. Mēs redzēsim piemēru, kurā mēs izmantosim JQuery, lai pieprasītu grāmatu Google API, lai iegūtu JavaScript.

HTML kods

Mūsu HTML kodam nebūs nekādu sarežģījumu, to varat redzēt zemāk.

 Notiek meklēšanas JS grāmatu ielāde

Galvenē mēs redzam, ka es importēju skriptu ar nosaukumu script.jsRedzēsim vēlāk, ko tas dara. Mēs arī importējam JQuery un fontu, kas tiks izmantots, lai ievietotu vērpēju, tas nav attēls, tā ir ikona, kas labi izskatīsies visu veidu ekrānos, jūs varat redzēt, kādi tie ir, un instalēt to no oficiālās fantastiskās lapas . Tad mēs ievietojam rakstzīmju kodējumu utf-8 caur meta rakstzīmju kopa.

Ķermeņa daļā ir izveidota poga, kas būs atbildīga par pieprasījuma sākšanu API, un div, kurā mēs ievietosim datus, kas mūs interesē no saņemtās atbildes. Abiem ir ID, lai tos varētu izmantot no mūsu skripta.

JQuery kods

Kods nav sarežģīts, ja esat pieradis pie AJAX pieprasījumiem, izmantojot JQuery.

 $ (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) // Izmanto tikai, lai vērpēju redzētu ilgāk piemērā $ ('# data' ). html ("") for (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (autors == undefined) author = "?" $ ('# data'). append ("
" + (i + 1) +") " + grāmata.nosaukums +"
- Autors / -i: " + autors +"")}});})}) miega režīms (milisekundes) {var start = new Date (). getTime (); while (true) {if ((jauns datums (). getTime () - sākums)> milisekundes) pārtraukums;}}

Kodu var redzēt iesaiņotu $ (dokuments). gatavs, tas ir nepieciešams, lai skripts tiktu ielādēts, kad mūsu HTML dokuments ir gatavs un ID ir "zināmi". Iekšpusē mēs to varam redzēt mēs dzirdam notikumu ar pogas klikšķikā jau minēts iepriekš, tiks uzsākta lūgumraksta izskatīšana.

Vienu reizi klikšķa notikums tiek aktivizēts Pirmā lieta, kas tiek darīta, ir ievietot vērpēju (kā minēts iepriekš, tas nav attēls, ja šeit tas būtu gif.webp, mēs ievietotu tagu img), un pēc tam turpināt AJAX pieprasījums, tas ir lūgums GŪT, tāpēc mēs norādām URL, kur tas tiks darīts.

Mēs redzam .darīts, šī daļa tiks izpildīta, kad API atbilde būs pabeigta. Iekšpusē .darīts mums ir izsaukums uz funkciju Gulēt (Tas ir izveidots tā, lai kods "gaidītu" vēl 2 sekundes pēc atbildes saņemšanas, lai jūs varētu labi novērtēt vērpēju, to nevajadzētu skaidri pateikt). Svarīgs kods ir tas, kas iztukšo html, kurā ir identifikācijas dati (noņem vērpēju), un aizpilda to cilpā ar datiem, ko tā saņem no API, (dati tiek nodoti kā parametrs, tas ir atbilde), apstrādāt Atbildei ir jāzina atgrieztie dati, šajā gadījumā tiek parādīts grāmatu nosaukums un to autors vai autori.

PiezīmeMēs varētu arī likt .neveiksmīgs, es darītu kļūdas gadījumā izpildīt tajā ietverto kodu, taču šī daļa tiek novērsta, jo šajā piemērā tas nav nepieciešams. Ja vēlaties uzzināt vairāk par AJAX pieprasījumiem JQuery, apmeklējiet šo lapu vai šo apmācību.

Funkcija Gulēt Tā nav daļa no ikonas ielādes un nav arī interesanta, taču tā palīdz mums labi redzēt, ka vērpējs ir pievienots, vienīgais, ko tā dara, ir iegūt sākotnējo laiku un izveidot bezgalīgu cilpu, līdz tiek ievietotas milisekundes parametru, tad cilpa tiek pārtraukta un funkcija beidzas.

Apskatīsim, kā darbojas kods, atverot lapu, mēs redzam vienkāršu pogu: