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

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

ページの読み込み中に進行状況バーを表示するには、静的読み込みイメージが必要です。これは、XMLHttpRequest (XHR) オブジェクトによって提供される進行状況イベントを利用することで実現できます。

質問で提供されている JavaScript コードでは、window.load() イベント リスナーを使用して、ロード中の画像を非表示にしています。ページの読み込みが完了しました。プログレス バーを実装するには、代わりに XHR オブジェクトのプログレス イベントを利用できます。

次のコード スニペットは、XHR プログレス イベントを使用して実行中のプログレス バーを表示する方法を示しています。

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

このコードは、アップロードとダウンロードの両方の進行状況の進行状況イベント リスナーを使用して XHR リクエストを設定します。アップロードまたはダウンロードの進行状況が変化すると、イベント リスナーがトリガーされ、それに応じて進行状況バーを更新できます。

コード内の console.log() ステートメントはデモ用です。これらを、percentComplete 値に基づいて進行状況バーの外観を更新する独自のコードに置き換えることができます。

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