✅ JQuery ile bir Spinner veya yükleme simgesi nasıl yapılır

İçindekiler

HTML Kodu
JQuery kodu

Bu öğreticide Spinner'ın yaratılması, örneğin veritabanına bir istek üzerinde çalışırken web'de görebildiğimiz tipik yükleme simgesi.

Kullanıcının sayfamızın çalıştığını takdir etmesi ve çalışmadığını düşünmemesi için bu yöntemleri kullanmak önemlidir, kullanıcıya geri bildirim hayati önem taşır. JavaScript'i almak için kitapların google API'sine istekte bulunmak için JQuery kullanacağımız bir örnek göreceğiz.

HTML Kodu

HTML kodumuzun herhangi bir karmaşıklığı olmayacak, aşağıda görebilirsiniz.

 Arama JS kitaplarını yükleme

adlı komut dosyasını içe aktardığımı başlıkta görebiliriz. script.jsNe yapacağını daha sonra göreceğiz. Ayrıca JQuery ve Spinner'ı koymak için kullanılacak yazı tipini içe aktarıyoruz, bu bir resim değil, her türlü ekranda iyi görünecek bir simge, ne olduğunu görebilir ve resmi fontawesome sayfasından yükleyebilirsiniz. . Sonra karakterlerin kodlamasını koyarız. utf-8 aracılığıyla meta karakter seti.

Gövde kısmında API'ye istek başlatmakla görevli olacak bir buton ve alınan yanıttan bizi ilgilendiren verileri ekleyeceğimiz bir div oluşturulmuştur. Her ikisinin de onları betiğimizden kullanabilmek için bir kimliği var.

JQuery kodu

JQuery ile AJAX isteklerine alışkınsanız, kod karmaşık değildir.

 $ (belge) .ready (işlev () {$ ("# düğme"). tıklayın (işlev () {$ ('# veri'). html ('') $ .ajax ({url: "https: // www.googleapis.com/books/v1/volumes?q=intitle:javascript "}). done (işlev (veri) {uyku (2000) // Yalnızca $ ('# veri') örneğinde döndürücüyü daha uzun görmek için kullanıldı ). html ("") for (var i = 0; i <data.items.length; i ++) {var kitap = data.items [i] .volumeInfo; var yazar = kitap.yazarlar if (yazar == tanımsız) yazar = "?" $ ('# veri'). append ("
"+ (i + 1) +") "+ kitap.başlığı +"
- Yazar / lar: "+ yazar +"")}});})}) function sleep (milisaniye) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> milisaniye) kırmak;}}

Kod tarafından sarılmış görülebilir $ (belge) .hazır, bu, HTML belgemiz hazır olduğunda ve kimlikler "bilindiğinde" betiğin yüklenmesi için gereklidir. İçeride bunu görebiliriz bir düğme tıklama olayı duyuyoruz, daha önce de belirtildiği gibi, kampanyayı başlatan kişi olacaktır.

Bir kere tıklama olayı tetiklendi Yapılan ilk şey Spinner'ı (daha önce söylendiği gibi bir resim değil, burada bir gif.webp olsaydı img etiketini koyardık) yerleştirmek ve ardından işlemi gerçekleştirmeye devam etmektir. AJAX isteği, bu bir istek ELDE ETMEK, bu yüzden yapılacak URL'yi belirtiriz.

görüyoruz .tamamlamak, bu kısım API yanıtı bittiğinde yürütülecek. içinde .tamamlamak fonksiyona bir çağrımız var uyumak (Bu, bir yanıt aldıktan sonra kodun 2 saniye daha "bekleyeceği" şekilde oluşturulmuştur, böylece Spinner'ı iyi değerlendirebilirsiniz, bu açıklığa kavuşturulmamalıdır). Önemli olan kod, id verisine sahip html'yi boşaltan (Spinner'ı kaldırır) ve API'den aldığı verilerle bir döngü içinde dolduran koddur, (veri parametre olarak iletilir, yapılır, yanıttır), işlemek için Cevap, döndürdüğü verileri bilmelidir, bu durumda kitapların başlığı ve yazarları veya yazarları gösterilir.

Notbiz de koyabiliriz .başarısız, hata durumunda içerdiği kodu çalıştırırdım, ancak bu örnek için gerekli olmadığı için bu kısım önlenir. JQuery'deki AJAX istekleri hakkında daha fazla bilgi edinmek istiyorsanız, aşağıdaki sayfayı veya aşağıdaki öğreticiyi ziyaret edin.

İşlev uyumak Simgenin bir parçası değildir ve yüklemek için ilginç değildir, ancak Spinner'ın eklendiğini iyi görmemize yardımcı olur, yaptığı tek şey başlangıç zamanını elde etmek ve olarak eklenen milisaniyelere kadar sonsuz bir döngü yapmaktır. bir parametre geçer, ardından döngü bozulur ve işlev sona erer.

Kodun nasıl çalıştığını görelim, sayfayı açtığımızda basit bir buton görüyoruz: