✅ Jak vytvořit ikonu Spinner nebo načítání pomocí JQuery

Obsah

HTML kód
JQuery kód

V tomto tutoriálu vytvoření Spinneru, typická ikona načítání, kterou můžeme vidět na webu, například při práci na požadavku do databáze.

Je důležité používat tyto metody, aby uživatel mohl ocenit, že naše stránka funguje a nemyslí si, že nefunguje, zpětná vazba pro uživatele je životně důležitá. Uvidíme příklad, ve kterém použijeme JQuery k zadání požadavku na Google API knih pro získání JavaScriptu.

HTML kód

Kód našeho HTML nebude mít žádné komplikace, můžete jej vidět níže.

 Načítání knih Hledat JS

V záhlaví vidíme, že importuji skript s názvem script.jsUvidíme později, co to udělá. Dovážíme také JQuery a písmo, které bude použito k vložení Spinneru, toto není obrázek, je to ikona, která bude vypadat dobře na všech typech obrazovek, můžete vidět, co tam je, a nainstalovat si to z oficiální stránky fontawesome . Poté vložíme kódování znaků utf-8 přes meta znaková sada.

V části těla bylo vytvořeno tlačítko, které bude mít na starosti spuštění požadavku na API a div, kam vložíme data, která nás zajímají z obdržené odpovědi. Oba mají ID, aby je mohli používat z našeho skriptu.

JQuery kód

Kód není složitý, pokud jste zvyklí na požadavky AJAX s JQuery.

 $ (document) .ready (function () {$ ("# button"). click (function () {$ ('# data'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (funkce (data) {sleep (2000) // Slouží pouze k delšímu otáčení v příkladu $ ('# data') ). html ("") pro (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var autor = kniha.autoři if (autor == undefined) author = "?" $ ('# data'). append ("
" + (i + 1) +") " + book.title +"
- Autor / s: " + autor +"")}});})}) funkce spánku (milisekundy) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milliseconds) přestávka;}}

Kód je vidět zabalený $ (document) .ready, to je nezbytné pro načtení skriptu, když je náš dokument HTML připraven a ID jsou „známá“. Uvnitř to vidíme slyšíme událost kliknutí na tlačítko, jak již bylo řečeno, petici zahájí právě on.

Jednou spustí se událost kliknutí První věc, kterou je třeba udělat, je vložit Spinner (jak již bylo řečeno, nejedná se o obrázek, pokud by to byl gif.webp, vložili bychom tag img) a poté pokračovali v provádění Požadavek AJAX, je to žádost DOSTAT, tak určíme URL, kde se to bude dělat.

Vidíme to .Hotovo, tato část bude spuštěna, když odezva API skončí. Uvnitř .Hotovo máme volání funkce spát (Toto bylo vytvořeno tak, že kód „čeká“ ještě 2 sekundy po obdržení odpovědi, takže můžete Spinner dobře ocenit, to by nemělo být objasněno). Důležitý kód je ten, který vyprázdní html, který obsahuje data id (odstraní Spinner) a vyplní jej ve smyčce daty, která obdrží z API (data jsou předávána jako parametr v done, je odpověď), zpracovat Odpověď musí znát data, která vrací, v tomto případě je uveden název knih a jejich autor nebo autoři.

PoznámkaMohli bychom také dát .selhat, co bych udělal, je spustit kód, který obsahuje v případě chyby, ale tato část je odstraněna, protože pro tento příklad to není nutné. Pokud se chcete dozvědět více o požadavcích AJAX v JQuery, navštivte následující stránku nebo následující tutoriál.

Funkce spát Není součástí, ani není zajímavý pro načítání ikony, ale pomáhá nám vidět dobře, že byl přidán Spinner, jediné, co dělá, je získat počáteční čas a vytvořit nekonečnou smyčku do milisekund, které jsou vloženy jako průchod parametru, pak je smyčka přerušena a funkce končí.

Podívejme se, jak kód funguje, když stránku otevřeme, uvidíme jednoduché tlačítko:

Když na něj kliknete, zobrazí se ikona Spinner nebo načítání, což bude trvat nejméně 2 sekundy v akci (budete muset přidat čas, který požadavek zabere):