Bagaimana untuk Melaksanakan Bar Kemajuan Dinamik Semasa Pemuatan Halaman?

Paparkan Bar Kemajuan Dinamik Semasa Pemuatan Halaman

Keperluan untuk maklum balas masa nyata semasa memuatkan skrin telah menjadi semakin penting. Daripada imej statik, mari kita terokai cara melaksanakan bar kemajuan yang sedang berjalan yang menyediakan pengguna dengan gambaran visual proses pemuatan.

Untuk melaksanakan bar kemajuan, kami menggunakan peristiwa kemajuan objek XMLHttpRequest (XHR). Acara ini membolehkan kami memantau kemajuan muat naik dan muat turun dalam masa nyata. Berikut ialah contoh:

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

Skrip ini melampirkan pendengar acara pada objek XMLHttpRequest, yang mencetuskan panggilan balik apabila kemajuan muat naik atau muat turun berlaku. Di dalam panggilan balik, kami mengira peratusan penyiapan dan log konsol nilai. Maklumat ini boleh digunakan untuk mengemas kini bar kemajuan secara dinamik, memberikan petunjuk visual kepada pengguna tentang status proses pemuatan halaman.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Bar Kemajuan Dinamik Semasa Pemuatan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!