网页加载进度条
网页加载进度条用于显示网页的加载行为或加载的进度，以提高用户体验。
原理
在进入网页的时候，显示一个固定定位的遮罩层。当页面加载完成的将其移除。
实现方案
基于事件
要实现这样的一个效果，我们就需要知道页面加载的进度以及何时完成。这时候我们可以使用 document. onreadystatechange 来侦测页面加载状态改变事件，通过 document. readyState 属性的值来判断页面处于加载的哪个状态。
document.readyState 属性有四个取值：
- uninitialized - 还未开始载入
- loading - 载入中
- interactive - 已加载，文档与用户可以开始交互
- complete - 载入完成
document.onreadystatechange = function () {
if ( document.readyState === 'complete' ) {
// .loading 是遮罩层的 class
$('.loading').fadeOut();
}
}
基于页面执行顺序
在网页中，HTML 代码的执行顺序是从上往下顺序执行的，通过在页面的不同的位置插入 js 代码来修改遮罩层的一些数据（比如宽度，或者是数值）来达到动态显示加载状态的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header>
内容
</header>
<script type="text/javascript">
$('.loading').animate({ width: '10%'}, 0.1);
</script>
<section>
内容
</section>
<script type="text/javascript">
$('.loading').animate({ width: '25%'}, 0.1);
</script>
<section>
内容
</section>
<script type="text/javascript">
$('.loading').animate({ width: '40%'}, 0.1);
</script>
<section>
内容
</section>
<script type="text/javascript">
$('.loading').animate({ width: '60%'}, 0.1);
</script>
<section>
内容
</section>
<script type="text/javascript">
$('.loading').animate({ width: '80%'}, 0.1);
</script>
<footer>
内容
</footer>
<script type="text/javascript">
$('.loading').animate({ width: '100%'}, 0.1);
</script>
</body>
</html>
