常见的几种网页进度条及如何判断页面已经加载完毕

首先推荐一个自动生成gif图标的一个网址：preloaders.net

在里面挑选好加载的效果图以后，点击下载：

下载完成以后把gif图片保存到你项目的img文件夹中，方便使用。
**

loading方法

1.很low的方法——直接使用定时器

	
	
	
	
	


	

		

	
	
使用定时器的方法（不会判断页面加载，只是在定时器完成之后将也面显示出来）
	
	
	
	
	
	
	
	

**
这种方法是直接给一个时间，等结束以后，加载效果消失。但是这种方法并不能判断页面是否已经加载完毕，虽然简单粗暴，但显然这并不是我们想要的结果；

2.根据页面是否加载完毕来关闭loading效果：
首先，咱们要想知道页面是否加载完毕，需要知道以下几点：
1.document.onreadystatechange 页面加载状态改变时的事件
2.document.readyState 页面当前文档的状态
1）.uninitialized 还未开始载入
2）.loading 载入中
3）.interactive 已加载，文档和永和可以开始交互
4）.complete 载入完成
这里我们就不使用定时器的那种方法了，我们直接来判断页面是否加载完毕去决定loading效果的关闭与否，那么直接将第一个方法的js改为：

document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
	if(document.readyState=="complete"){//complete加载完成
		$(".loading").fadeOut();
	}
}

这种方法是咱们用到的最多的方法了，因为它能判断出来页面是否真的已经加载完毕。

3.用C3做进度条的效果
这个就要用transform属性以及animation动画了，上面两个方法里，都是用的gif图，那么这样一个加载的效果我们用C3怎么去实现呢？

说下大概思路吧，首先你肯定得写一个容器把进度条装进去：

然后再修改样式：

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

写好这些以后，动画就已经产生了。
再下来将第二种方法的js粘贴过来，就达到了用CSS3来实现页面加载的一个动画效果了。

4.还有一种加载方式时，实时获取加载数据，就是百分数的那种效果，比如这样：

这种效果在页面中也比较常见，也是用css3做的，代码如下：
首先，先给一个容器用来装进度条：

	

		
		0%
	

然后写对应的样式及动画：

*{
		margin:0;
		padding: 0;
	}
	.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
	.loading .pic{width: 100px;height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px;}
	.loading .pic span{display: block;width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;
	}
	@-webkit-keyframes rotate{
		0%{-webkit-transform: rotate(0deg);}
		100%{-webkit-transform: rotate(360deg);}
	}
	@keyframes rotate{
		100%{transform: rotate(360deg);}
	}；

那么现在打开浏览器以后呈现在眼前的是一个单调的转圈的动画，所以接下来我们还得写js：

$(function () {
	var img = $("img");//首先获取所有的Img对象
	var num = 0;//定义一个变量，赋值给b标签用
	img.each(function(i){//遍历获取到的所有img
		var oImg = new Image();//new一个新对象
		oImg.onload = function(){//使用onload方法，在加载完成后执行
			oImg.onload = null;//首先清除掉缓存
			num++;//每次加载的过程中num++，即执行次数
			$(".loading b").html(parseInt(num/$("img").size()*100)+"%");//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数
				if(num >= i){
					$(".loading").fadeOut();//当num的值大于等于个数时隐藏
				}
			}
			oImg.src = img[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
		})
	})
	

OK，完成（一定记得要引jQuery，当然用原生就不用引了）。