Question

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

的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％。

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

需要帮助！

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

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

1 个答案: