网页加载进度条--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.οnlοad=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.οnlοad=null;
		cImg.οnlοad=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.οnlοad=null; //防止重复加载

		cImg.οnlοad=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>