使用jquery 实现进度条

进度条的实现

学习自： 这个网站

原理：

在 一个页面中一般分为:header,content,sidebar,footer，每次我们访问页面时，浏览器发送请求，肯定要花费一定的时间的，以进度条的宽度来实现加载时间的变化
在header时，让进度条显示宽度，10%,
加载content时，让进度条显示一定的宽度，50%,
sidebar 70%，
footer 100%
就是这样,动画函数使用jquery的animate()，
最后，页面加载完成，使用fadeout()淡出 让进度条消失就可以了.
html 代码：

    
   
         
        
    
    
        
     

     
header
    

    
some data
    

     

     

     

      
 

然后给每个loading div 加样式

.loading { 
     background: #FF6100;
      height: 5px;
      position: fixed;
      top: 0;      
      z-index: 99999;}

引入 jquery

加上 jquery代码

$ (".loading").animate ({"width": "10%"}, 50);   
$ (".loading").animate ({"width": "50%"}, 50);   
$ (".loading").animate ({"width": "70%"}, 50);   
$ (".loading").animate ({"width": "100%"}, 50);   
$ (function () {
      $(".loading").fadeOut();  
 });

完整代码

   
   

   


  

  
header
  

  
some data
  

  

  

  

  
  
  

最后，一个进度条就完成了，

其实 理解了之后很简单

只要知道 html 页面的每个部分都是要 时间加载的，在每个页面部分加载完成之前与之后用一个宽度表示就行了，最后页面加载完成 让进度条消失即可