Bagaimana untuk Memaparkan Bar Kemajuan Berjalan Semasa Pemuatan Halaman Menggunakan JavaScript?

Memaparkan Bar Kemajuan Berjalan Semasa Pemuatan Halaman

Untuk mencapai bar kemajuan yang sedang berjalan semasa halaman anda dimuatkan, anda boleh menggunakan XMLHttpRequest (XHR ) objek dalam JavaScript. Objek XHR menyediakan peristiwa kemajuan yang membolehkan anda memantau muat naik dan memuat turun kemajuan permintaan.

Berikut ialah contoh menggunakan jQuery untuk menyediakan bar kemajuan:

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

Dalam skrip ini , fungsi xhr mencipta objek XMLHttpRequest baharu dan mendaftarkan pendengar acara untuk kemajuan muat naik dan muat turun. Pendengar acara ini bertanggungjawab untuk mengira dan mengemas kini bar kemajuan berdasarkan peratusan data yang dipindahkan.

Untuk membuat ini berfungsi dengan kod sedia ada anda, anda perlu menggantikan fungsi $(window).load anda dengan panggilan $.ajax di atas. Pastikan URL dan parameter data ditetapkan dengan sewajarnya untuk permintaan anda.

Ingat untuk menggayakan bar kemajuan menggunakan CSS untuk memberikannya gambaran visual. Anda boleh menyesuaikan lebar, ketinggian, warna dan animasi agar sesuai dengan pilihan reka bentuk anda.

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