Hur man gör en Spinner- eller laddningsikon med JQuery

I den här självstudien skapande av en Spinner, den typiska laddningsikonen som vi kan se på webben, till exempel när vi arbetar med en begäran till databasen.

Det är viktigt att använda dessa metoder så att användaren kan inse att vår sida fungerar och inte tror att den inte fungerar, feedback till användaren är avgörande. Vi kommer att se ett exempel där vi kommer att använda JQuery för att göra en begäran till Googles API för böcker för att få JavaScript.

HTML -kod

Koden för vår HTML kommer inte att ha någon komplikation, du kan se den nedan.

 Laddar Sök JS -böcker

Vi kan se i rubriken att jag importerar det manus som heter script.jsVi får se senare vad det gör. Vi importerar också JQuery och teckensnittet som kommer att användas för att sätta Spinner, det här är inte en bild, det är en ikon som kommer att se bra ut på alla typer av skärmar, du kan se vad det finns och installera det från den officiella fontawesome -sidan . Sedan lägger vi in ​​kodningen av karaktärerna utf-8 via meta teckenuppsättning.

I kroppsdelen har en knapp skapats som kommer att ansvara för att starta förfrågan till API och en div där vi kommer att infoga data som intresserar oss från det mottagna svaret. Båda har ett id för att kunna använda dem från vårt manus.

JQuery -kod

Koden är inte komplicerad om du är van vid AJAX -förfrågningar med JQuery.

 $ (dokument) .ready (funktion () {$ ("# knapp"). klicka (funktion () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000) // Används endast för att se spinnaren längre i exemplet $ ('# data' ). html ("") för (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 +"
- Författare: " + författare +"")}});})}) funktion sömn (millisekunder) {var start = nytt datum (). getTime (); medan (sant) {if ((nytt datum (). getTime () - start)> millisekunder) ha sönder;}} 

Koden kan ses inlindad av $ (dokument). redo, detta är nödvändigt för att skriptet ska kunna laddas när vårt HTML -dokument är klart och ID: n är "kända". Inuti kan vi se det vi hör en knappklickhändelse, som sagt tidigare, kommer att vara den som startar framställningen.

En gång klickhändelsen avfyras Det första som görs är att sätta in spinnaren (som sagt tidigare är det inte en bild, om det vore ett gif.webp här skulle vi sätta img -taggen) och sedan fortsätta med att utföra AJAX -begäran, det är en begäran SKAFFA SIG, så vi anger webbadressen där det ska göras.

Vi ser .Gjort, kommer denna del att köras när API -svaret är klart. Insidan av .Gjort vi har ett samtal till funktionen sova (Detta har skapats så att koden "väntar" 2 sekunder till efter att du fått ett svar, så att du kan uppskatta Spinnaren väl, detta ska inte klargöras). Den viktiga koden är den som tömmer html som har id -data (tar bort spinnaren) och fyller den i en loop med data som den tar emot från API: et (data skickas som en parameter i gjort, är svaret), att hantera Svaret måste känna till de data det returnerar, i detta fall visas titeln på böckerna och deras författare eller författare.

NoteraVi kunde också sätta .misslyckas, vad jag skulle göra är att köra koden som den innehåller vid fel, men den delen undviks, eftersom det i detta exempel inte är nödvändigt. Om du vill veta mer om AJAX -förfrågningar i JQuery, besök följande sida eller följande handledning.

Funktionen sova Det är inte en del av, och det är inte heller intressant att ladda ikonen, men det hjälper oss att se väl att spinnaren har lagts till, det enda den gör är att få den initiala tiden och göra en oändlig slinga tills millisekunderna som sätts in som ett parameterpass, då slingan bryts och funktionen avslutas.

Låt oss se hur koden fungerar, när vi öppnar sidan ser vi en enkel knapp:

När du klickar på den visas Spinner- eller laddningsikonen, vilket tar minst två sekunder i handling (du måste lägga till den tid som begäran tar):

Och i slutet av förfrågan kommer det att visa oss böckerna och deras författare som vi kan se nedan:

NoteraDenna teknik kan tillämpas om du gör förfrågningarna direkt med JavaScript, utan att använda JQuery, det är att anpassa koden.

Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng