版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Picking_up_stones/article/details/76597714
后来打开很多网页在导航栏顶部都有一个进度显示条，就在想如何显示进度呢？那样的JS要如何写？如何知道网页加载到哪了呢？就上网搜了下如何实现，发现实现的思路很巧妙，今天来简单的总结下。
一. 原理
原理特别简单，我想知道浏览器是如何解析并渲染网页的都知道，HTML文档的代码是按照出现的顺序，从上往下一条一条的执行的。所以我们就可以根据网页代码执行的顺序在合适的位置加上JS代码，去控制进度条的长度变化就可以了。
二. 实现代码
<!DOCTYPE html>
<html>
<head>
<title>网页进度条</title>
<style type="text/css">
html, body{
margin: 0;
padding: 0;
}
.loadbar{
background-color: skyblue;
height: 5px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="loadbar"></div>
<nav>导航栏：10%</nav>
<script type="text/javascript">
$('.loadbar').animate({'width':'10%'},100);
</script>
<aside>左侧边栏：20%</aside>
<script type="text/javascript">
$('.loadbar').animate({'width':'30%'},100);
</script>
<article>主体：40%</article>
<script type="text/javascript">
$('.loadbar').animate({'width':'70%'},100);
</script>
<aside>右侧边栏：20%</aside>
<script type="text/javascript">
$('.loadbar').animate({'width':'90%'},100);
</script>
<footer>页脚：10%</footer>
<script type="text/javascript">
$('.loadbar').animate({'width':'100%'},100);
</script>
<script type="text/javascript">
//页面资源加载完毕后清除动画
$().ready(function(){
$('.loadbar').fadeOut();
});
</script>
</body>
</html>在代码中使用jQuery去控制进度条动画，可以看出是根据页面的内容分布来控制添加JS代码的位置，并根据内容的多少来确定进度条的长度，当然这只是一个模拟，不能反映页面的真实加载速度，但是只要断点设置合理，还是很有参考价值的。所以我们需要在使用中，针对自己的页面布局来设置适合页面的进度显示条。