✅ Как да направите Spinner или икона за зареждане с JQuery

Съдържание

HTML код
JQuery код

В този урок създаване на Spinner, типичната икона за зареждане, която можем да видим в мрежата, например при работа по заявка към базата данни.

Важно е да използвате тези методи, така че потребителят да оцени, че нашата страница работи и да не мисли, че не работи, обратната връзка с потребителя е жизненоважна. Ще видим пример, в който ще използваме JQuery, за да направим заявка към google API на книги за получаване на JavaScript.

HTML код

Кодът на нашия HTML няма да има усложнения, можете да го видите по -долу.

 Зареждане на търсене на JS книги

Можем да видим в заглавката, че импортирам скрипта, наречен script.jsЩе видим по -късно какво ще направи. Ние също импортираме JQuery и шрифта, който ще се използва за поставяне на Spinner, това не е изображение, това е икона, която ще изглежда добре на всички видове екрани, можете да видите какво има и да го инсталирате от официалната страница fontawesome . След това поставяме кодирането на знаците utf-8 чрез мета набор от знаци.

В частта на тялото е създаден бутон, който ще отговаря за стартирането на заявката към API и div, където ще вмъкнем данните, които ни интересуват от получения отговор. И двамата имат идентификатор, за да могат да ги използват от нашия скрипт.

JQuery код

Кодът не е сложен, ако сте свикнали с AJAX заявки с 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) // Използва се само за да виждате спинера по -дълго в примера $ ('# data' ). html ("") за (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 +"
- Автор / и: " + автор +"")}});})}) функция sleep (милисекунди) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> милисекунди) почивка;}}

Кодът може да се види опакован от $ (документ). готов, това е необходимо, за да се зареди скриптът, когато нашият HTML документ е готов и идентификационните номера са „известни“. Вътре можем да видим това чуваме събитие при натискане на бутон, както бе споменато по -рано, ще бъде този, който ще стартира петицията.

Един път събитието щракване се задейства Първото нещо, което се прави, е да вмъкнете Spinner (както беше казано по -рано, това не е изображение, ако тук беше gif.webp, щяхме да поставим img маркера) и след това да продължим да изпълняваме AJAX заявка, това е молба ПОЛУЧАВАЙТЕ, така че ние посочваме URL адреса, където ще бъде направено.

Ние виждаме .Свършен, тази част ще бъде изпълнена, когато отговорът на API приключи. Вътре в .Свършен имаме извикване на функцията сън (Това е създадено, така че кодът да "изчака" още 2 секунди след получаване на отговор, така че можете да оцените добре Spinner, това не трябва да се изяснява). Важният код е този, който изпразва html, който има идентификационни данни (премахва Spinner) и го запълва в цикъл с данните, които получава от API, (данните се предават като параметър в готово, е отговорът), за обработка Отговорът трябва да знае данните, които връща, в този случай се показват заглавието на книгите и техният автор или автори.

ЗабележкаМожем също да сложим .неуспешно, това, което бих направил, е да изпълня кода, който съдържа в случай на грешка, но тази част е избягвана, тъй като за този пример не е необходимо. Ако искате да научите повече за AJAX заявките в JQuery, посетете следната страница или следния урок.

Функцията сън Той не е част от, нито е интересен за зареждане на иконата, но ни помага да видим добре, че Spinner е добавен, единственото нещо, което прави, е да получи първоначалното време и да направи безкраен цикъл до милисекундите, които са вмъкнати като преминаване на параметър, след това цикълът се прекъсва и функцията приключва.

Нека да видим как работи кодът, когато отворим страницата, виждаме прост бутон:

Когато кликнете върху него, ще се появи иконата на Spinner или зареждане, което ще отнеме поне 2 секунди в действие (ще трябва да добавите времето, което отнема заявката):