✅ Jak zrobić ikonę Spinnera lub ładowania za pomocą JQuery

Spisie treści

Kod HTML
Kod JQuery

W tym samouczku stworzenie Spinnera, typowa ikona ładowania, którą możemy zobaczyć w sieci, na przykład podczas pracy nad żądaniem do bazy danych.

Ważne jest, aby korzystać z tych metod, aby użytkownik mógł docenić, że nasza strona działa i nie sądzić, że nie działa, informacja zwrotna dla użytkownika jest niezbędna. Zobaczymy przykład, w którym użyjemy JQuery, aby wysłać żądanie do Google API książek w celu uzyskania JavaScript.

Kod HTML

Kod naszego HTML nie będzie miał żadnych komplikacji, możesz go zobaczyć poniżej.

 Wczytywanie Szukaj książek JS

W nagłówku widzimy, że importuję skrypt o nazwie skrypt.jsZobaczymy później, co robi. Importujemy również JQuery i czcionkę, która zostanie użyta do umieszczenia Spinnera, to nie jest obraz, jest to ikona, która będzie dobrze wyglądać na wszystkich typach ekranów, możesz zobaczyć, co tam jest i zainstalować ją z oficjalnej strony fontawesome . Następnie umieszczamy kodowanie znaków w utf-8 przez zestaw znaków meta.

W części body stworzony został przycisk, który będzie odpowiadał za uruchomienie żądania do API oraz div, w którym wstawimy interesujące nas dane z otrzymanej odpowiedzi. Oba mają identyfikator, aby móc z nich korzystać z naszego skryptu.

Kod JQuery

Kod nie jest skomplikowany, jeśli jesteś przyzwyczajony do żądań AJAX z JQuery.

 $ (dokument) .ready (function () {$ ("przycisk #"). click (function () {$ ('# data').html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (function (data) {sleep (2000)) // Używane tylko do oglądania dłuższego spinnera w przykładzie $ ('# data' ).html ("") for (var i = 0; i <data.items.length; i ++) {var książka = data.items [i] .volumeInfo; var autor = książka.autorzy if (autor == undefined) autor = "?" $ ('# dane'). append ("
„+ (i + 1) +”) „+ tytuł.książki +”
- Autor / s: "+ autor +"")}});})}) function sleep (milisekundy) {var start = new Date ().getTime (); while (true) {if ((new Date (). getTime () - start)> milisekundy) złamać;}}

Kod można zobaczyć opakowane przez $ (dokument) .gotowy, jest to konieczne do załadowania skryptu, gdy nasz dokument HTML jest gotowy, a identyfikatory są „znane”. Wewnątrz możemy to zobaczyć słyszymy zdarzenie kliknięcia przycisku, jak powiedziano wcześniej, będzie tym, który wystosuje petycję.

Jeden raz zdarzenie kliknięcia jest uruchamiane Pierwszą rzeczą, którą należy zrobić, jest wstawienie Spinnera (jak wspomniano wcześniej, nie jest to obraz, gdyby to był gif.webp, umieścilibyśmy tutaj tag img), a następnie przystąpiliśmy do wykonywania Żądanie AJAX, to jest prośba DOSTWAĆ, więc podajemy adres URL, pod którym zostanie to zrobione.

Widzimy .zrobione, ta część zostanie wykonana po zakończeniu odpowiedzi API. Wewnątrz .zrobione mamy wywołanie funkcji spać (Zostało to stworzone, aby kod „czekał” jeszcze 2 sekundy po otrzymaniu odpowiedzi, abyś mógł dobrze docenić Spinnera, nie powinno to być jasne). Ważnym kodem jest ten, który opróżnia html, który ma dane id (usuwa Spinnera) i wypełnia go w pętli danymi, które otrzymuje z API (dane są przekazywane jako parametr w gotowej odpowiedzi), do obsłużenia Odpowiedź musi znać dane, które zwraca, w tym przypadku podany jest tytuł książek i ich autor lub autorzy.

NotatkaMoglibyśmy również umieścić .zawieść, co bym zrobił, to wykonanie kodu, który zawiera w przypadku błędu, ale ta część jest pominięta, ponieważ w tym przykładzie nie jest to konieczne. Jeśli chcesz dowiedzieć się więcej o żądaniach AJAX w JQuery, odwiedź następną stronę lub poniższy samouczek.

Funkcja spać Nie jest to część ani nie jest interesujące dla załadowania ikony, ale pomaga nam dobrze widzieć, że Spinner został dodany, jedyne, co robi, to uzyskać czas początkowy i wykonać nieskończoną pętlę aż do milisekund, które są wstawiane jako po podaniu parametru, pętla zostaje przerwana i funkcja się kończy.

Zobaczmy jak działa kod, po otwarciu strony widzimy prosty przycisk: