在浏览器加载任何内容之前加载加载栏

我正在使用引导程序，并且希望将带有百分比的引导程序进度栏放入页面加载，以及何时进度栏宽度达到浏览器中显示的页面的100％。我怎样才能做到这一点？我有一个的jsfiddle链接Jsfiddle但引导进度条的样本如何，我可以将它设置为页面加载在浏览器加载任何内容之前加载加载栏

var progress = setInterval(function() { 
    var $bar = $('.bar'); 

    if ($bar.width() >= 400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
    } else { 
     $bar.width($bar.width() + 40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 800);

来源

2014-11-22 Daniel.V

在简而言之：没有办法知道使用JS加载了多少页面。 http://stackoverflow.com/questions/4999703/preload-with-percentage-javascript-jquery – Terry 2014-11-22 15:01:49

你可以花费的时间量加载，就像这样：

//Gets the loading time in milliseconds 
    var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; 
    //Start time 
    var timestart= (new Date).getTime(); 

    var progress = setInterval(function() { 
     var time = ((new Date).getTime() - timestart)/10; 
     var $bar = $('.bar'); 
     var width=Math.round((((time*400)/loadTime)*100)/400); 
     if (width >= 100) { 
      clearInterval(progress); 
      $('.progress').removeClass('active'); 
     } 
     width=width>100?100:width; 
     $bar.width(width+"%"); 
     $bar.text(width+"%"); 
    }, 1000/10);

来源

2014-11-22 16:46:35

在浏览器加载任何内容之前加载加载栏

回答

相关问题