标签：
有时候访问网站，在加载的过程中经常会出现显示加载进度的进度条，或者类似的一个旋转的菊花图。如果留心的话不难发现，那些进度条出现的加载进度数字几乎每次都是那几个数字，30% -> 50% -> 80%，这样。这样会极大提高用户的体验，既能告知用户加载进度，让等待过程不再那么无聊，又能防止用户以为网站有问题而直接离开站点。但是这个进度条是怎么实现的呢？
一般在网络情况不好的情况下，加载的首页又比较大的时候就可以使用进度条或者一些有意思的动画。一般的实现方式刚开始时给整个页面加个蒙板层，将加载过程覆盖在蒙板层下面（有可能很丑陋），然后在蒙板层上加个进度条或者旋转的菊花。
<!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标签或者动态图！
进度条无非就是多了一个控制进度显示的模块，那怎么控制呢？这个也很简单，已加载内容 / 整体内容 * 100%；
但是问题来了，目前在文档没有加载完成之前谁都没有办法获得要加载的文件大小。但是，还是有一个解决办法。因为一般要加载的内容分区块加载，比如头部区域，主题内容、边栏内容、注脚内容等。会有多个ajax去请求（一般不会全都用ajax，这里只是举个例子），再比如，头部区域的请求ajax完成了，就认为加载了30%，这个时候修改进度条进度或者给菊花图换个数字，主题内容的请求ajax加载完了，就认为加载了80%，以此类推。这就是为什么网站的加载进度条一般只是显示某几个进度数字的原因！
<script type="text/javascript"> $(document).ready(function(){
.
. $.ajax({ url: "header", success: function(){ //进度条进度改为30% }});
.
.
. $.ajax({ url: "content", success: function(){ //进度条进度改为80% }}); }); </script>
标签：
原文地址：http://www.cnblogs.com/kiscall/p/4741078.html
