如何根据页面加载增加框的宽度

我很难创建一个应该根据页面加载增加其宽度的进度条。如何根据页面加载增加框的宽度

的jQuery

$(document).ready(function(){ 

    var startTime = window.performance.timing.domContentLoadedEventEnd; 
    var endTime = window.performance.timing.navigationStart; 
    var loadTime = startTime - endTime;  

})

HTML

<div class="outerWidth"> 
    <div class="innerWidth"> 
    </div> 
</div>

CSS

.outerWidth { 
    display: block; 
    border: 1px solid #999; 
    height: 10px; 
    margin-top: 20px; 
} 

.innerWidth { 
    background-color: #f00; 
    display: block; 
    height: 10px; 
    width: 0; 
}

按照该代码的宽度Ò f innerWidth类是0

现在我想做两件事情。

1. 因为我有网页的加载时间我这样怎么能提高innerWidth类宽度时，页面加载100％。
如何显示在百分比时间，以便它应在页面装载结束时显示100％完成。

同样的进度条样的程序我在找。也显示百分比。但通过计算页面大小或页面加载时间来加载任何页面。我不知道什么方式是正确的。

需要帮助！

来源

2017-07-06 Sam

你试过用Bootstrap进度条吗？ http://getbootstrap.com/components/#progress – pedro

你怎么知道你的页面要加载多少时间？没有这些信息，你不能显示％。 – Dacklf

Dacklf看到loadTime变量会显示页面的加载时间。 – Sam

您无法知道页面加载的时间。因此，您无法显示百分比。

一些想法：

负荷小，重量轻，不完整版本的页面。使用AJAX加载完整版本并在此期间显示loading gif。
仅显示loading gif并通过AJAX加载完整页面。
如果您担心使用给定脚本（客户端）的时间，请在该持续时间内显示loading gif。不要担心初始加载时间。

关于问题的一部分，您可以使用bootstrap轻松管理进度条，或者自己创建一个进度条。这是一个example。

function startProgress() { 
    var curProg = 0;   
    var interval = setInterval(function() { 
     curProg = curProg + 5; 
     $('#progBar').css('width', curProg + '%'); 
     if (curProg > 100) clearInterval(interval); 
    }, 50) 
}

来源

2017-07-06 13:17:53 Dacklf

如何根据页面加载增加框的宽度

回答

相关问题