Saya ingin menempatkan animasi lingkaran pemintalan "harap tunggu, memuat" di situs saya. Bagaimana saya melakukannya dengan jQuery?
Anda dapat melakukan ini dengan berbagai cara berbeda. Ini bisa berupa status kecil pada halaman yang mengatakan "Memuat ...", atau sekeras elemen yang memutih halaman saat data baru dimuat. Pendekatan yang saya ambil di bawah ini akan menunjukkan kepada Anda bagaimana menyelesaikan kedua metode.
Mari kita mulai dengan memberi kita animasi "memuat" yang bagus dari http://ajaxload.info yang akan saya gunakan
Mari kita buat elemen yang bisa kita tampilkan / sembunyikan kapan saja kita membuat permintaan ajax:
<div class="modal"><!-- Place at bottom of page --></div>
Selanjutnya mari kita berikan bakat:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
Baiklah, ke jQuery. Bagian selanjutnya ini sebenarnya sangat sederhana:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
Itu dia! Kami melampirkan beberapa acara ke elemen tubuh kapan saja ajaxStart
atau ajaxStop
acara dipecat. Ketika acara ajax dimulai, kami menambahkan kelas "memuat" ke tubuh. dan ketika acara selesai, kami menghapus kelas "memuat" dari tubuh.
Lihat dalam aksi: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()
dan.ajaxStart()
hanya boleh dilampirkan ke dokumen. docsSejauh memuat gambar yang sebenarnya, periksa situs ini untuk banyak pilihan.
Sejauh menampilkan DIV dengan gambar ini saat permintaan dimulai, Anda memiliki beberapa pilihan:
A) Perlihatkan dan sembunyikan gambar secara manual:
B) Gunakan ajaxStart dan ajaxComplete :
Menggunakan ini elemen akan menampilkan / menyembunyikan permintaan apa pun . Bisa baik atau buruk, tergantung kebutuhan.
C) Gunakan panggilan balik individual untuk permintaan tertentu:
sumber
Bersamaan dengan apa yang disarankan Jonathan dan Samir (keduanya jawaban yang bagus sekali!), JQuery memiliki beberapa kejadian yang akan muncul untuk Anda saat membuat permintaan ajax.
Ada
ajaxStart
acara... dan itu saudara,
ajaxStop
acara ituBersama-sama, mereka membuat cara yang baik untuk menampilkan pesan kemajuan ketika aktivitas ajax terjadi di mana saja di halaman.
HTML:
Naskah:
sumber
.ajaxStart
hanya bisa dilampirkan ke dokumen, yaitu.$(document).ajaxStart(function(){}).
Anda dapat mengambil GIF animasi dari lingkaran pemintalan dari Ajaxload - tempelkan di suatu tempat dalam hirarki file situs web Anda. Maka Anda hanya perlu menambahkan elemen HTML dengan kode yang benar, dan menghapusnya setelah selesai. Ini cukup sederhana:
Maka Anda hanya perlu menggunakan metode ini dalam panggilan AJAX Anda:
Ini memiliki beberapa peringatan: pertama-tama, jika Anda memiliki dua atau lebih tempat gambar pemuatan dapat ditampilkan, Anda perlu melacak berapa banyak panggilan yang berjalan sekaligus, dan hanya menyembunyikan ketika mereka semua selesai. Ini dapat dilakukan dengan menggunakan penghitung sederhana, yang harus bekerja untuk hampir semua kasus.
Kedua, ini hanya akan menyembunyikan gambar pemuatan pada panggilan AJAX yang berhasil. Untuk menangani status kesalahan, Anda harus melihat ke dalam
$.ajax
, yang lebih kompleks daripada$.load
,$.get
dan sejenisnya, tetapi juga jauh lebih fleksibel.sumber
showLoadingImage
sebelum Anda mulai danhideLoadingImage
setelah Anda selesai. Seharusnya cukup sederhana. Anda mungkin perlu memasukkan semacamsetTimeout
panggilan untuk memastikan browser benar-benar membuat<img>
tag baru - Saya telah melihat beberapa kasus di mana tidak mengganggu sampai JavaScript selesai dieksekusi.Solusi terbaik Jonathon di IE8 (animasi tidak ditampilkan sama sekali). Untuk memperbaiki ini, ubah CSS ke:
sumber
jQuery menyediakan kait acara untuk saat AJAX meminta mulai dan berakhir. Anda dapat menghubungkan ini untuk menunjukkan loader Anda.
Misalnya, buat div berikut:
Atur ke
display: none
dalam stylesheet Anda. Anda dapat mengaturnya dengan cara apa pun yang Anda inginkan. Anda dapat menghasilkan gambar pemuatan yang bagus di Ajaxload.info , jika Anda mau.Kemudian, Anda dapat menggunakan sesuatu seperti berikut untuk membuatnya ditampilkan secara otomatis saat mengirim permintaan Ajax:
Cukup tambahkan blok Javascript ini ke akhir halaman Anda sebelum menutup tag tubuh Anda atau di mana pun Anda mau.
Sekarang, setiap kali Anda mengirim permintaan Ajax,
#spinner
div akan ditampilkan. Ketika permintaan selesai, itu akan disembunyikan lagi.sumber
Jika Anda menggunakan Turbolinks With Rails, ini solusi saya:
Ini adalah CoffeeScript
Ini adalah SASS CSS berdasarkan pada jawaban bagus pertama dari Jonathan Sampson
sumber
Seperti Mark H katakan, blockUI adalah caranya.
Ex.:
Obs .: Saya mendapat ajax-loader.gif di http://www.ajaxload.info/
sumber
Dengan segala hormat terhadap posting lain, Anda memiliki solusi yang sangat sederhana di sini, menggunakan CSS3 dan jQuery, tanpa menggunakan sumber daya eksternal lebih lanjut atau file.
sumber
Ini akan membuat tombol-tombol menghilang, maka animasi "memuat" akan muncul di tempatnya dan akhirnya hanya menampilkan pesan yang berhasil.
sumber
Sebagian besar solusi yang saya lihat mengharapkan kita untuk merancang overlay pemuatan, menyembunyikannya dan kemudian menyembunyikannya saat diperlukan, atau, menampilkan gif atau gambar, dll.
Saya ingin mengembangkan plugin yang kuat, di mana dengan panggilan jQuery sederhana saya dapat menampilkan layar memuat dan merobohkannya ketika tugas selesai.
Di bawah ini adalah kode. Itu tergantung pada Font yang mengagumkan dan jQuery:
Masukkan saja di atas dalam file js dan sertakan di seluruh proyek.
Penambahan CSS:
Doa:
sumber
Perhatikan bahwa saat menggunakan ASP.Net MVC, dengan
using (Ajax.BeginForm(...
, pengaturanajaxStart
tidak akan berfungsi.Gunakan
AjaxOptions
untuk mengatasi masalah ini:sumber
Per https://www.w3schools.com/howto/howto_css_loader.asp , ini adalah proses 2 langkah tanpa JS:
1.Tambahkan HTML ini di tempat yang Anda inginkan pemintal:
<div class="loader"></div>
2. Tambahkan CSS ini untuk membuat pemintal yang sebenarnya:
sumber
$("#loader").toggle();
sebelum membuat permintaan yang berjalan lama untuk memulai animasi dan membuat panggilan lain dalam fungsi panggilan balik dari permintaan untuk menyembunyikannya.Saya menggunakan CSS3 untuk animasi
sumber