写一个网页进度loading[有趣的思考过程]

作者：jack_lo

原文地址：http://www.jianshu.com/p/4c93f5bd9861

 昨天在简书看到的，顿时让我觉得原来一个loading过程都可以做的这么精彩，这么有细节。

最近刚好要用github-pages做一个我的仓库，学以致用。下文是我在我制作loading效果中遇到的一个小问题，最后还是解决了。

进度条采用Bootstrap的进度条组件，高效便捷。

函数如下：

//loading
var $loading=$(".loading").eq(0);
var $progressBar=$(".progress-bar");
//设置进度条的函数
var setProgress=function(prg){
	 $progressBar.css("width",prg+"%");
}
var prg=0;
var timer=0;
//下面有过程所解决的三个问题
//1.分两个过程，第二过程(即window.onload之后)开始加速
progress([80,90],[1,3],100)//
window.onload=function(){
//2.设置一个延迟，不然根本还来不及看到100%效果的实现，页面就sildeup了。这里显然应该用一个匿名函数
	progress(100,[1,5],100,function(){setTimeout(function(){
		$loading.slideUp()
	},1000)})
}
//封装后的执行函数
function progress(dist,speed,delay,callback){
	var _dist=random(dist);
	var _delay=random(delay);
	var _speed=random(speed);
	window.clearInterval(timer);
	timer=window.setTimeout(function(){
		if(prg+_speed>=_dist){
			window.clearTimeout(timer)
			prg=_dist;
			callback&&callback()
		}else{
			prg+=_speed
			progress(dist,speed,delay,callback)
		}
		setProgress(parseInt(prg))
		console.log(prg)
	},_delay)
}
//3.随机函数，让进度条保持动态的
function random (n) {
  if (typeof n === 'object') {
    var times = n[1] - n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

　　如果你看过原文那篇文章，上面的源码是不难理解的，但是这里过程中出现了一个小问题，即如果不设置slideup延迟，进度条总是在50左右就开始执行slideup函数（但是此时的prg是100），那么为什它的显示效果会和参数不一致呢？

思索了半天，在排查了各种原因后，我发现这是bootstrap在捣鬼。怎么说呢？bootsrap的进度条组建css设置如下:

.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}

　　恍然大悟，原来bs的进度条组建默认有一个CSS3的过渡效果，那么问题很简单了，覆盖掉它一切问题就解决了

加上这个loading笑过之后，github-pages做的demo仓库也算是简单完成了，看一下效果：

仓库地址：coderzzp的demo仓库