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

  • 相关阅读:
    linux初学者-正则表达式
    linux初学者-文件管理篇
    linux初学者-常用基本命令篇
    初学者的linux
    java中接口的定义和接口的实现
    深入理解Java的接口和抽象类
    在pom.xml中的dependencies点击add怎么没有搜索到相关jar包
    json对象(对象+数组)
    poi导出模板(我的备份)
    js对象和数组的定义
  • 原文地址:https://www.cnblogs.com/coderzzp/p/6486402.html
Copyright © 2020-2023  润新知