Comment puis-je implémenter une barre de progression lors du chargement d'une page avec JavaScript ?

Affichage d'une barre de progression pendant le chargement d'une page

La nécessité d'afficher une barre de progression pendant le chargement d'une page peut améliorer l'expérience utilisateur en fournissant un visuel retour sur l'état de chargement. Pour créer une barre de progression en cours d'exécution, vous pouvez exploiter les écouteurs d'événements Ajax pour suivre la progression de toutes les requêtes adressées au serveur.

Voici un exemple de code qui montre comment implémenter ce comportement :

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

Ce code attache les écouteurs d'événements à l'objet XMLHttpRequest, qui initie la requête Ajax. L'événement « progression » est capturé pour la progression du téléchargement et du téléchargement. Dans les écouteurs d'événements, le pourcentage d'achèvement est calculé et peut être utilisé pour mettre à jour l'interface utilisateur de la barre de progression en conséquence.

Par exemple, si vous avez un élément de barre de progression avec un ID « barre de progression », vous pouvez mettez à jour sa largeur en utilisant le pourcentage calculé :

<code class="javascript">$("#progress-bar").css("width", percentComplete * 100 + "%");</code>

En incorporant cette technique dans votre processus de chargement de page, les utilisateurs recevront une représentation visuelle de la progression, améliorant ainsi la réactivité globale et l'expérience utilisateur de votre application.

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!