网页加载进度条--6种

这里介绍6中网页加载进度条

另外发现两个很有意思的网站：http://autoprefixer.github.io/    css3兼容代码

                                                   https://preloaders.net/    定义自己喜欢的gif图片

整体思路：

1. 设置遮罩层  和  进度加载图片（可以用css3写，也可以在上面的网站中下载，下面两种都用到了）

2. 根据页面加载进度来实现，当页面加载完成时，隐藏遮罩层和小图片，显示出页面内容

3. 定时器实现

1. 定时器加载

原理：设置固定的时间后将遮罩层和加载图片隐藏，显示页面内容

效果：

HTML

<div class='loading' id='loading'>    <div class='pic'></div> </div>   <img src='http://p0.so.qhimgs1.com/sdr/605_768_/t01c9ac4e0a0bcb5e2c.jpg'>   <img src='http://p1.so.qhimgs1.com/sdr/610_768_/t01e3ee17a1235f54ed.jpg'>   <img src='http://p4.so.qhimgs1.com/sdr/567_768_/t0112acfd759d69319a.jpg'>   <img src='http://p4.so.qhmsg.com/sdr/525_768_/t01e6a5e96377408709.jpg'>   <img src='http://p0.so.qhimgs1.com/t019055cff48851983c.jpg'>   <img src='http://p3.so.qhimgs1.com/t018ec7a8b6a87a1db3.jpg'>   <img src='http://p2.so.qhimgs1.com/sdr/512_768_/t01f9ca3ac246f748c2.jpg'>   <img src='http://p1.so.qhmsg.com/sdr/512_768_/t01d9673f8d05bdaba6.jpg'>   <img src='http://p1.so.qhimgs1.com/sdr/512_768_/t0161ae1c31aee503d1.jpg'>

CSS

    .loading{     width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; background:#fff;}.loading .pic{   width:64px;   height:64px;   background:url(images/001.gif);   position:absolute;   top:0px;   left:0;   bottom:0;   right:0;   margin:auto;}

JS

$(function(){  setInterval(function(){     $('.loading').fadeOut();  },3000);});    /*window.onload=function(){  setTimeout(function(){     var oLoding=document.getElementById('loading'); oLoding.style.display='none';  },3000);}*/

2. 通过加载状态事件实现进度条

  效果同上 

用到的知识点：

document.onreadystatechange :页面加载状态改变时的事件
document.readyState: 返回当前文档的状态

JS

 document.onreadystatechange=function(){     if(document.readyState=='complete'){    $('.loading').fadeOut(); }  };

3. 通过css3来制作进度条小动画

效果：

HTML: 

<div class='loading' id='loading'>    <div class='pic'>  <i></i>  <i></i>  <i></i>  <i></i>  <i></i></div> </div>

 CSS

 .loading{     width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; background:#fff;}.loading .pic{   width:50px;   height:50px;   position:absolute;   top:0px;   left:0;   bottom:0;   right:0;   margin:auto;}.loading .pic i{   display:block;   float:left;   width:6px;   height:50px;   background:#006699;   margin:0 2px;   -webkit-transform:scaleY(0.4);       -ms-transform:scaleY(0.4);           transform:scaleY(0.4);   -webkit-animation:load 1.2s infinite;           animation:load 1.2s infinite;}   .loading .pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s}   .loading .pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s}   .loading .pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s}   .loading .pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s}@-webkit-keyframes load{   0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}   20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}@keyframes load{   0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4)}   20%{-webkit-transform:scaleY(1);transform:scaleY(1)}}

4.实时获取加载数据的进度条

效果：

 实现原理：通过加载图像来实现效果

注意：src要写在load后面，IE中会出错

  JS

$(function(){      var oImg=$('img'); var num=0; oImg.each(function(i){    var cImg=new Image();        cImg.onload=null;cImg.onload=function(){  num++;  $('.loading b').html(parseInt(num/$('img').length*100)+'%');          if(num>=$('img').length){    $('.loading').fadeOut();  }}cImg.src=oImg[i].src; });   });

5.进度条改变的效果

效果：

原理：根据加载进度来改变进度条中bar的框width值

  *{margin:0;padding:0;}    .loading{     width:100%; height:100%; position:fixed; top:0; left:0; z-index:1000; background:#fff;}.progress{  width:300px;  height:30px;  background:#ccc;  margin:200px auto;  position:relative;}.progress .bar{  position:absolute;  width:0%;  height:30px;  background:#006699;}.progress b{  display:block;  width:20px;  height:30px;  position:absolute;  left:40%;  top:-20px;}

 <div class='loading' id='loading'>    <div class='progress'>    <div class='bar'></div><b>0%</b>  </div> </div>

  JS

 $(function(){      var oImg=$('img');//获取所有图片 var num=0; oImg.each(function(i){    var cImg=new Image();//新建图像对象        cImg.onload=null; //防止重复加载cImg.onload=function(){  num++;          var scale=parseInt(num/$('img').length*100);//实时更新数据  $('.loading .bar').css({'width':scale+'%'});//设置进度条  $('.loading b').html(scale+'%');//显示百分比文本          if(num>=$('img').length){ //判断是否加载完毕    $('.loading').fadeOut();   }}cImg.src=oImg[i].src;//src放在load后面，是防止在IE中出错 });   });

6. 根据文件加载顺序来实现加载进度条（页面顶部的加载条）

效果：

 <header>   <img src='http://p0.so.qhimgs1.com/sdr/605_768_/t01c9ac4e0a0bcb5e2c.jpg'>   <img src='http://p1.so.qhimgs1.com/sdr/610_768_/t01e3ee17a1235f54ed.jpg'>   <img src='http://p4.so.qhimgs1.com/sdr/567_768_/t0112acfd759d69319a.jpg'> </header>  <script>    $('.loading .pic').animate({width:'10%'},100);  </script> <section class='banner'>   <img src='http://p4.so.qhmsg.com/sdr/525_768_/t01e6a5e96377408709.jpg'>   <img src='http://p0.so.qhimgs1.com/t019055cff48851983c.jpg'>   <img src='http://p3.so.qhimgs1.com/t018ec7a8b6a87a1db3.jpg'> </section>  <script>    $('.loading .pic').animate({width:'60%'},100);  </script> <footer'>   <img src='http://p2.so.qhimgs1.com/sdr/512_768_/t01f9ca3ac246f748c2.jpg'>   <img src='http://p1.so.qhmsg.com/sdr/512_768_/t01d9673f8d05bdaba6.jpg'>   <img src='http://p1.so.qhimgs1.com/sdr/512_768_/t0161ae1c31aee503d1.jpg'> </footer> <script>    $('.loading .pic').animate({width:'100%'},100,function(){   $('.loading').fadeOut();});  </script>