Comment puis-je afficher une barre de progression en cours d'exécution pendant le chargement de la page à l'aide des événements XMLHttpRequest ?

Affichage d'une barre de progression en cours d'exécution pendant le chargement de la page

Pour afficher une barre de progression en cours d'exécution pendant le chargement d'une page, une approche différente de l'affichage d'un une image de chargement statique est requise. Ceci peut être réalisé en utilisant les événements de progression fournis par l'objet XMLHttpRequest (XHR).

Dans le code JavaScript fourni dans la question, l'écouteur d'événement window.load() est utilisé pour masquer l'image de chargement une fois le la page a fini de se charger. Pour implémenter une barre de progression, nous pouvons utiliser les événements de progression de l'objet XHR à la place.

L'extrait de code suivant montre comment utiliser les événements de progression XHR pour afficher une barre de progression en cours d'exécution :

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

Ce code configure une requête XHR avec des écouteurs d'événements de progression pour la progression du téléchargement et du téléchargement. Lorsque la progression du téléchargement ou du téléchargement change, l'écouteur d'événements sera déclenché et vous pourrez mettre à jour votre barre de progression en conséquence.

Les instructions console.log() dans le code sont à des fins de démonstration. Vous pouvez les remplacer par votre propre code qui met à jour l'apparence de la barre de progression en fonction de la valeur percentComplete.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!