JS Loading 进度条实现思路

时间 2019-11-14

原文原文链接

　　有时候访问网站，在加载的过程当中常常会出现显示加载进度的进度条，或者相似的一个旋转的菊花图。若是留心的话不难发现，那些进度条出现的加载进度数字几乎每次都是那几个数字，30% -> 50% -> 80%，这样。这样会极大提升用户的体验，既能告知用户加载进度，让等待过程再也不那么无聊，又能防止用户觉得网站有问题而直接离开站点。可是这个进度条是怎么实现的呢？javascript

　　通常在网络状况很差的状况下，加载的首页又比较大的时候就可使用进度条或者一些有意思的动画。通常的实现方式刚开始时给整个页面加个蒙板层，将加载过程覆盖在蒙板层下面（有可能很丑陋），而后在蒙板层上加个进度条或者旋转的菊花。css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>load</title>
<style type="text/css">
.current a {
    font-size: 20px;
}
.over {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    opacity:0.5;
    z-index: 1000;
}
.layout {
    display: none;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
    height: 20%;
    z-index: 1001;
    text-align:center;
}
</style>
<script type="text/javascript">
function showLoading(){
  document.getElementById("over").style.display = "block";
  document.getElementById("layout").style.display = "block";
}
</script>
</head>
<body>
    <div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
    <div id="over" class="over"></div>
    <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div>
</body>
</html>

　　这段代码简单介绍了如何添加菊花图，可是进度条的话怎么玩进度呢？能够用html5的progress标签或者动态图！html

　　进度条无非就是多了一个控制进度显示的模块，那怎么控制呢？这个也很简单，已加载内容 / 总体内容 * 100%；html5

　　可是问题来了，目前在文档没有加载完成以前谁都没有办法得到要加载的文件大小。可是，仍是有一个解决办法。由于通常要加载的内容分区块加载，好比头部区域，主题内容、边栏内容、注脚内容等。会有多个ajax去请求（通常不会全都用ajax，这里只是举个例子），再好比，头部区域的请求ajax完成了，就认为加载了30%，这个时候修改进度条进度或者给菊花图换个数字，主题内容的请求ajax加载完了，就认为加载了80%，以此类推。这就是为何网站的加载进度条通常只是显示某几个进度数字的缘由！java

<script type="text/javascript">
$(document).ready(function(){
　　.
　　.
    $.ajax({ url: "header", success: function(){
    //进度条进度改成30%
  }});
　　.
　　.
　　.
  $.ajax({ url: "content", success: function(){
    //进度条进度改成80%
  }});
});
</script>