jquery - 页面进度条

Question

我的客户希望在初始页面加载时有一个进度条。并在页面加载后立即隐藏它。 所以我考虑了一下，想出了这个办法。

var num = 0,
    progress = $('.progressbar'),
    interval = setInterval(function(){
        num++
        progress.text(num+'%')
    }, 100);

$(window).load(function(){
    clearInterval(interval);
    $({number: num}).animate({number: 100}, { 
      duration: 1000,
      easing:'swing', 
      step: function() { 
          progress.text(Math.round(this.number)+"%");
      }
    })
})

Demo (我添加了一张大图来显示加载)

为了减少在 dom load 之前数字达到 100 的可能性，我唯一能想到的是添加一些 if 来检查数字是否例如 50% 并减少间隔重复值，我猜 75% 也是一样，但我觉得它不是很聪明。

我的问题几乎是——“有没有更聪明的方法来做到这一点？”

Answer 1

只是一个想法，我相信您已经考虑过 jQuery 进度条。

我在 Code Academy 上发现了这个概念并制作了这个 FIDDLE .

JS

var mybar = $(".progressbar").progressbar({value: 1});

var progress = setInterval(function() {
                                       updateprog();
                                       }, 10
                          );

function updateprog ()
{
      var currentVal = $(".progressbar").progressbar("option", "value");
       var nextVal = currentVal + 1;
       if (nextVal > 100)
          {
           $(mybar).hide();
           clearInterval(progress);
           } else
          {
           $(".progressbar").progressbar({value: nextVal});
           }
}

我没有设置任何样式，但这应该相当简单。