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

【问题标题】：How to increase width of box according to page load如何根据页面负载增加框的宽度
【发布时间】：2017-07-06 12:20:00
【问题描述】：

我很难创建一个进度条，它应该根据页面的负载增加其宽度。

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

根据代码，innerWidth 类的宽度为 0

现在我想做两件事。

1. 由于我有页面加载时间，所以如何在页面加载时将 innerWidth 类宽度增加到 100%。
1. 如何以百分比显示该时间，以便在页面加载结束时显示为 100%。

这也是我正在寻找的一种进度条程序。这也显示百分比。但是对于任何页面加载，通过计算页面大小或页面加载时间。我不知道哪种方式是正确的。

需要帮助！

【问题讨论】：

你试过使用 Bootstrap 进度条吗？ getbootstrap.com/components/#progress
你怎么知道你的页面需要多少时间来加载？如果没有此信息，您将无法显示 %。
Dacklf 查看 loadTime 变量，它将显示页面的加载时间。
@Sam 但 loadTime 知道页面完成加载后加载页面所花费的时间。那还有什么意义呢？
@Sam 只有知道页面加载所用的时间，才能知道页面加载所用时间的比例，当页面加载完毕时，你就知道了。如果你能对这个酒吧进行编码，那么你就会获得诺贝尔奖。

标签： javascript jquery html

【解决方案1】：

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

一些想法：

加载页面的小型、轻量级和不完整版本。使用 AJAX 加载完整版本，同时显示loading gif。
仅显示 loading gif 并通过 AJAX 加载完整页面。
如果您担心使用给定脚本（客户端）的时间，请在此期间显示loading gif。并且不用担心初始加载时间。

关于部分问题，您可以使用引导程序轻松管理进度条或自己创建进度条。这是example。

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

【讨论】：