Comment implémenter une barre de progression dynamique lors du chargement de la page ?

Afficher une barre de progression dynamique pendant le chargement de la page

Le besoin d'un retour en temps réel lors du chargement des écrans est devenu de plus en plus important. Au lieu d'une image statique, explorons comment implémenter une barre de progression en cours d'exécution qui fournit aux utilisateurs une représentation visuelle du processus de chargement.

Pour implémenter une barre de progression, nous utilisons l'événement de progression de l'objet XMLHttpRequest (XHR). Cet événement nous permet de surveiller la progression du téléchargement et du téléchargement en temps réel. Voici un exemple :

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

Ce script attache des écouteurs d'événements à l'objet XMLHttpRequest, qui déclenchent des rappels chaque fois que la progression du téléchargement ou du téléchargement se produit. À l’intérieur des rappels, nous calculons le pourcentage d’achèvement et enregistrons la valeur dans la console. Ces informations peuvent être utilisées pour mettre à jour dynamiquement une barre de progression, fournissant ainsi une indication visuelle aux utilisateurs sur l'état du processus de chargement de la page.

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!