L'implémentation JavaScript du code à barres de progression du chargement des pages Web est super simple_javascript skills

La barre de progression de la page Web 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 processus de 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.

HTML

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.

S'il y a une page, elle est divisée en quatre parties selon le bloc : en-tête, contenu 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 l'approximation. Pourcentage de chargement, la structure de la page est la suivante :

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

Ensuite, nous ajoutons la barre de progression.loading à la première ligne sous 6c04bd5ca3fcae76e30b72ad730ca86d.

<div class="loading"></div> 

CSS

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 //提高进度条的优先层级，避免被其他层遮挡 
} 

jQuery

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

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

On peut voir qu'après ne pas charger un nœud, jQuery appelle la méthode d'animation animate() pour modifier la largeur de la barre de progression. Chaque changement de nœud prend 50 millisecondes pour rendre la barre de progression plus fluide, et passe finalement de 0. % à 100%, l'animation de progression de la barre de progression est terminée.

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();  
});