作者: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; 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仓库