javascript - 为什么我的进度条在开始加载之前显示完整的进度值

Question

我使用 jQuery UI 制作了一个进度条。这是查看它的链接:DEMO

很好用，就是有问题。在代码中，我有 setTimeout( progress, 2000 ); 这意味着它必须等待 2 秒才能开始。但在此期间它显示 .ui-progressbar-value 的背景，当整个进度完成时，它必须是可见的。 2 秒后它会隐藏并像往常一样进步星星。

有趣的是，当我在 JSFiddle 上尝试它时，它没有显示这个类并且工作得很好。所以在浏览器中只有这个问题。 <强> Here is the JSFiddel link

这是我的js代码:

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }

    }

    setTimeout( progress, 2000 );
  });

和 CSS:

.enterance{
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
    background-color:black;
    width:100%; 
    height:100%;
    z-index:10;
    color:rgba(255,255,255,1.00);
}
.enterance .loader{
    position:absolute;
    width:600px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -300px;
}
.ui-progressbar-value {
    background:url(http://goo.gl/V9dAfn) no-repeat;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar{
    background:url(http://goo.gl/rBH0N1) no-repeat;
    background-size:cover;
    width:600px;
    height:429px;
    border:0;
}
.ui-progressbar .ui-progressbar-value{margin:0;}
.progress-label{
    font-size:90px;
    font-family: 'News Cycle', sans-serif;
    color:#FFFFFF; 
    right:0px; 
    position:absolute;
}

那么我怎么能在等待 2 秒时不显示此 .ui-progressbar-value 呢？此外，如何为此添加淡入效果？比如当页面加载时图像淡入？

提前致谢。

Answer 1

试试这个(除非你有问题，否则不能确定):

$(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "100%" );
        $(".loader").delay(1000).fadeOut(750);
      }
    });

    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;

      progressbar.progressbar( "value", val + 1 );

      if ( val < 100 ) {
        setTimeout( progress, 100 );
      }
    }

    progressbar.progressbar( "value", 0 );
    setTimeout( progress, 2000 );
  });