Comment implémenter la barre de progression du chargement de la page Web jquery

Cet article présente principalement l'implémentation de la barre de progression du chargement des pages Web jquery. Lorsque la page est en cours de chargement, la barre de progression rouge en haut s'affiche. Si vous êtes intéressé, vous pourrez en apprendre davantage. .

L'avantage de la progression du chargement d'une page Web est qu'elle peut mieux refléter la progression du chargement de la page Web actuelle. La barre de progression du chargement peut être animée de 0% à 100%. pour terminer le chargement de la page Web. Cependant, les navigateurs actuels ne fournissent pas d'interface pour la progression du chargement des pages, ce qui signifie que la page ne peut pas renvoyer avec précision la progression réelle du chargement de la page. Dans cet article, nous utilisons jQuery pour obtenir l'effet de barre de progression du chargement des pages.

La première chose que nous devons savoir est qu'actuellement aucun navigateur ne peut obtenir directement la taille de l'objet en cours de chargement. Par conséquent, nous ne pouvons pas atteindre un processus de chargement et d’affichage de 0 à 100 % en raison de la taille des données.

Par conséquent, nous devons utiliser la fonction de chargement ligne par ligne du code HTML, définir des nœuds dans plusieurs lignes sautées de l'ensemble du code de la page et fournir un retour d'information approximatif sur la progression floue pour obtenir l'effet de chargement de la progression. La signification générale est la suivante : chaque fois que la page est chargée dans la zone spécifiée, le résultat de progression de (n) % est renvoyé. En définissant plusieurs nœuds, l'objectif d'afficher la progression du chargement étape par étape est atteint.

Supposons qu'il y ait une page divisée en quatre parties : en-tête, contenu de gauche, barre latérale droite et pied de page. Nous considérons ces quatre parties comme quatre nœuds. Lorsque la page charge chaque nœud, définissons le pourcentage de chargement approximatif. . La structure de la page est la suivante :

<p id="header"> 
页头部分 
</p> 
<p id="mainpage"> 
左侧内容 
</p> 
<p id="sider"> 
右边侧栏 
</p> 
<p id="footer"> 
页脚部分 
</p>

Ensuite, nous ajoutons la barre de progression en cours de chargement à la première ligne ci-dessous.

<p class="loading"></p>

Nous devons définir le style de la barre de progression du chargement, définir la couleur d'arrière-plan, la hauteur, la position, la priorité, etc.

.loading{ 
  background:#FF6100; //设置进度条的颜色 
  height:5px; //设置进度条的高度 
  position:fixed; //设定进度条跟随屏幕滚动 
  top:0; //将进度条固定在页面顶部 
  z-index:99999 //提高进度条的优先层级，避免被其他层遮挡 
}

Ensuite, nous devons ajouter une animation de progression derrière chaque nœud et utiliser jQuery pour l'implémenter.

<p id="header"> 
页头部分 
</p> 
<script type="text/javascript"> 
  $(&#39;.loading&#39;).animate({&#39;width&#39;:&#39;33%&#39;},50); //第一个进度节点 
</script> 
<p id="mainpage"> 
左侧内容 
</p> 
<script type="text/javascript"> 
  $(&#39;.loading&#39;).animate({&#39;width&#39;:&#39;55%&#39;},50); //第二个进度节点 
</script> 
<p id="sider"> 
右边侧栏 
</p> 
<script type="text/javascript"> 
  $(&#39;.loading&#39;).animate({&#39;width&#39;:&#39;80%&#39;},50); //第三个进度节点 
</script> 
<p id="footer"> 
页脚部分 
</p> 
<script type="text/javascript"> 
  $(&#39;.loading&#39;).animate({&#39;width&#39;:&#39;100%&#39;},50); //第四个进度节点 
</script>

On peut voir qu'après le chargement de chaque nœud, jQuery appelle la méthode d'animation animate() pour modifier la largeur de la barre de progression. 50 millisecondes. Rendre la barre de progression plus fluide, et enfin passer de 0% à 100% pour terminer l'animation de progression de la barre de progression.

Lorsque la barre de progression atteint 100%, la page est chargée. La dernière étape à faire est de masquer la barre de progression.

$(document).ready(function(){ 
  $('.loading').fadeOut();   
});

Recommandations associées :

Comment utiliser les balises vidéo et audio et les barres de progression dans H5

Comment implémenter une barre de progression circulaire en CSS3

Une méthode simple d'implémentation de la barre de progression d'une page Web

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!