Bagaimanakah Saya Boleh Melaksanakan Bar Kemajuan Semasa Pemuatan Halaman dengan 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>

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>

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!