Tampilkan Efek:
1) Saat mengklik beban, simulasi melakukan pemuatan asinkron. Browser diblokir. Bilah kemajuan muncul.
Ide Implementasi:
1. Ketika pengguna mengklik tombol Muat untuk menjalankan permintaan asinkron. Bilah beban muncul ketika metode dipanggil.
2. Bagaimana cara mengimplementasikan bilah kemajuan?
1) Tambahkan div baru ke dokumen.body. Timpa browser. Atur latar belakang akan berwarna abu -abu. z-index = 999. Pengguna tidak dapat memodifikasi nilai antarmuka saat memuat.
2) Tambahkan div dinamis ke dokumen.body.
Implementasi Kode:
Main.html:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> </iteme> <script src = "loading.js" charset = "utf-8"> </script> <tautan rel = "stylesheet" href = "loading.csss" media = "charset" charset "charset" charset "charset" </uads 8 " OnClick = "Showloading ()"> Load </button> </body> </html>
Loading.js:
function showloading () {var overdiv = document.createElement ("div"); var loadingdiv = document.createElement ("div"); var childDiv1 = document.createElement ("div"); var childdiv2 = document.createElement ("div"); var childDiv3 = Document.createElement ("Div"); overdiv.classlist.add ('over'); loadingdiv.classlast.add ('spinner'); childdiv1.classlast.a dd ('bounce1') childdiv2.classlist.add ('bounce2') childdiv3.classlist.add ('bounce3') loadingdiv.appendchild (childDiv1); lo adingdiv.AppendChild (ChildDiv2); LoadingDiv.AppendChild (ChildDiv3); document.body.appendchild (overdiv); document.body.appendChild (loadingDiv) setTimeout (function () {document.body.removechild (overdiv); document.body.removechild (loadingdiv)}, 5000);}Loading.CSS
.spinner {width: 150px;text-align: center;left: 50%;top: 50%;position: absolute;z-index: 1000;}.over {width: 100%;height: 100%;z-index: 998;background-color: gray;position:absolute;top: 0px;left: 0px;opacity: 0.2;}.spinner > div {width: 30px;height: 30px; latar belakang-warna: #67CF22; Border-Radius: 100%; Tampilan: inline-block; -webkit-animasi: boulcedelay 1.4s tanpa batas kemudahan; animasi: animasi boulcedelay. .bounce1 {-webkit-animation-delay: -0.32s; animasi-delay: -0.32s;}. spinner .bounce2 {-webkit-animation-delay: -0.16s; animasi-delay: -0.16s;}@-webkit-inkey bouncing 0.0%,%{%{%{8.0 -webkit-transform: skala (0.0)} 40% {-webkit-transform: skala (1.0)}}@Keyframes Boulcedelay {0%, 80%, 100% {transform: skala (0.0);-Webkit-Transform: skala (0.0);} 40% {skala: 1.0); webkit-Transform: 0.0);} 40% {skala: 1.0); webkit-Transform: 0.0);} 40% {skala: 1.0);Meringkaskan:
1. Metode ini dapat dinaikkan. Kecilkan ulang permintaan AJAX sekali. Terapkan metode batang otomatis saat memanggil permintaan AJAX.
2. Jika bersudut, Angular menyediakan metode untuk memantau panggilan HTTP. Panggil saja metode batang progress saat memantau permintaan eksekusi HTTP. Tidak perlu menelepon metode bilah kemajuan setiap kali Anda menjalankan panggilan HTTP dan memantau permintaan eksekusi HTTP. Tidak perlu memanggil metode bilah kemajuan sendiri setiap kali Anda menjalankan HTTP.
Konten di atas terkait dengan bilah kemajuan pemuatan asinkron JS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!