Bagaimanakah saya boleh memaparkan bar kemajuan yang sedang berjalan semasa memuatkan halaman menggunakan acara XMLHttpRequest?

Memaparkan Bar Kemajuan Yang Berjalan Semasa Pemuatan Halaman

Untuk menunjukkan bar kemajuan yang sedang berjalan semasa halaman sedang dimuatkan, pendekatan yang berbeza daripada memaparkan imej pemuatan statik diperlukan. Ini boleh dicapai dengan menggunakan peristiwa kemajuan yang disediakan oleh objek XMLHttpRequest (XHR).

Dalam kod JavaScript yang disediakan dalam soalan, pendengar acara window.load() digunakan untuk menyembunyikan imej pemuatan sebaik sahaja halaman telah selesai dimuatkan. Untuk melaksanakan bar kemajuan, kami boleh menggunakan peristiwa kemajuan objek XHR sebaliknya.

Coretan kod berikut menunjukkan cara menggunakan peristiwa kemajuan XHR untuk memaparkan bar kemajuan yang sedang berjalan:

<code class="js">$.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 here
        console.log(percentComplete);
      }
    }, false);
    // Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        // Update the progress bar here
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    // Do something success-ish
  }
});</code>

Kod ini menyediakan permintaan XHR dengan pendengar acara kemajuan untuk kemajuan muat naik dan muat turun. Apabila kemajuan sama ada muat naik atau muat turun berubah, pendengar acara akan dicetuskan dan anda boleh mengemas kini bar kemajuan anda dengan sewajarnya.

Pernyataan console.log() dalam kod adalah untuk tujuan demonstrasi. Anda boleh menggantikannya dengan kod anda sendiri yang mengemas kini penampilan bar kemajuan berdasarkan nilai peratusLengkap.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memaparkan bar kemajuan yang sedang berjalan semasa memuatkan halaman menggunakan acara XMLHttpRequest?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!