Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Melaksanakan Bar Kemajuan Semasa Pemuatan Halaman dengan JavaScript?

Bagaimanakah Saya Boleh Melaksanakan Bar Kemajuan Semasa Pemuatan Halaman dengan JavaScript?

DDD
Lepaskan: 2024-10-29 03:15:02
asal
662 orang telah melayarinya

How Can I Implement a Progress Bar During Page Loading with JavaScript?

Memaparkan Bar Kemajuan Semasa Pemuatan Halaman

Keperluan untuk memaparkan bar kemajuan semasa halaman dimuatkan boleh meningkatkan pengalaman pengguna dengan menyediakan visual maklum balas mengenai status pemuatan. Untuk mencipta bar kemajuan yang sedang berjalan, seseorang boleh memanfaatkan pendengar acara Ajax untuk menjejaki kemajuan sebarang permintaan yang dibuat kepada pelayan.

Berikut ialah contoh kod yang menunjukkan cara melaksanakan gelagat ini:

<code class="javascript">$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar with the calculated percentage
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar with the calculated percentage
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    //Do something success-ish
  }
});</code>
Salin selepas log masuk

Kod ini melampirkan pendengar acara pada objek XMLHttpRequest, yang memulakan permintaan Ajax. Acara "kemajuan" ditangkap untuk kemajuan muat naik dan muat turun. Di dalam pendengar acara, peratusan penyiapan dikira dan boleh digunakan untuk mengemas kini UI bar kemajuan dengan sewajarnya.

Sebagai contoh, jika anda mempunyai elemen bar kemajuan dengan ID "bar kemajuan", anda boleh kemas kini lebarnya menggunakan peratusan yang dikira:

<code class="javascript">$("#progress-bar").css("width", percentComplete * 100 + "%");</code>
Salin selepas log masuk

Dengan memasukkan teknik ini ke dalam proses pemuatan halaman anda, pengguna akan dibekalkan dengan gambaran visual kemajuan, meningkatkan responsif keseluruhan dan pengalaman pengguna aplikasi anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Bar Kemajuan Semasa Pemuatan Halaman dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan