JavaScript を使用してページの読み込み中に進行状況バーを表示するにはどうすればよいですか?

ページの読み込み中に進行状況バーを表示する

ページの読み込み中に進行状況バーを表示するには、XMLHttpRequest (XHR) を利用できます。 ) JavaScript のオブジェクト。 XHR オブジェクトは、リクエストのアップロードとダウンロードの進行状況を監視できる進行状況イベントを提供します。

jQuery を使用して進行状況バーを設定する例を次に示します。

<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>

このスクリプトではの場合、xhr 関数は新しい XMLHttpRequest オブジェクトを作成し、アップロードとダウンロードの進行状況を示すイベント リスナーを登録します。これらのイベント リスナーは、転送されたデータの割合に基づいて進行状況バーを計算および更新する役割を果たします。

これを既存のコードで機能させるには、$(window).load 関数を次の関数に置き換える必要があります。上記の $.ajax 呼び出し。 URL とデータ パラメータがリクエストに合わせて適切に設定されていることを確認してください。

CSS を使用してプログレス バーのスタイルを設定し、視覚的に表現することを忘れないでください。デザインの好みに合わせて、幅、高さ、色、アニメーションをカスタマイズできます。

以上がJavaScript を使用してページの読み込み中に進行状況バーを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。