Javascript 将加载条放在浏览器上加载的任何内容之前
我正在使用bootstrap,我想为页面加载设置一个带有百分比的bootstrap进度条,当进度条宽度达到100%时,页面将显示在浏览器中。我该怎么做?我有一个带有JSFIDLE链接的引导进度条示例,但是如何设置它以进行页面加载呢Javascript 将加载条放在浏览器上加载的任何内容之前,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我正在使用bootstrap,我想为页面加载设置一个带有百分比的bootstrap进度条,当进度条宽度达到100%时,页面将显示在浏览器中。我该怎么做?我有一个带有JSFIDLE链接的引导进度条示例,但是如何设置它以进行页面加载呢 var progress = setInterval(function () { var $bar = $('.bar'); if ($bar.width() >= 400) { clearInterval(progress);
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);
您可以获得加载所需的时间,如下所示:
//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);
简而言之:使用JS无法知道页面加载了多少。