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});
           }
}

我没有说什么，但这应该是相当简单的。

页面进度条

1 个答案: