• 写一个网页进度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;
       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仓库

  • 相关阅读:
    HDU 5585 Numbers
    HDU 3308 LCIS
    POJ 2991 Crane
    POJ 1436 Horizontally Visible Segments
    POJ 3667 Hotel
    HaiHongOJ 1003 God Wang
    【SDOI 2008】 递归数列
    5月19日省中提高组题解
    【HDU 1588】 Gauss Fibonacci
    【POJ 3233】Matrix Power Series
  • 原文地址:https://www.cnblogs.com/coderzzp/p/6486402.html
Copyright © 2020-2023  润新知