如何在页面加载时显示正在运行的进度条答案

【问题标题】：How to show a running progress bar while page is loading如何在页面加载时显示正在运行的进度条
【发布时间】：2013-09-24 12:41:38
【问题描述】：

我想在我的页面加载like here 时在我的页面中显示一个正在运行的进度条。我在示例中使用了一个简单的加载图像，但我想将其转换为运行进度条。这是我的代码：

$(window).load(function() {
    alert("hi");
    $('#loading').hide();
});

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 100px;
    left: 240px;
    z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="loading">
    <img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt">
    <h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>

这是JSFiddle

【问题讨论】：

是什么让您的网站加载了 50%？
这只是一个例子，我想在页面开始加载时显示一个从 1% 开始的进度条，并在加载完成后上升到 100%。
查看pace.js
同意@Mottie - 我的项目也使用github.hubspot.com/pace/docs/welcome。这是一个非常好的插件，而且它也是自动的，这意味着您所要做的就是包含脚本。

标签： javascript jquery css html5-canvas

【解决方案1】：

我从This page复制了下面的相关代码。希望这对您有所帮助。

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
        console.log(percentComplete);
      }
    }, false);
    //Download progress
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with download progress
        console.log(percentComplete);
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "/",
  data: {},
  success: function(data) {
    //Do something success-ish
  }
});

【讨论】：

OP 要求提供页面加载进度条。您提供了一种确定上传进度的方法。
+1 您回答了这个问题中最难的部分——确定进度百分比。 “简单”部分（实际进度条）可以通过多种方式回答，包括 jQueryUI 进度条：jqueryui.com/progressbar
这并不能以任何方式回答问题。 OP 正在寻找一个显示页面加载进度的进度条。这个答案涉及上传进度。上传！= 下载。
你们看不懂吗？它具有上传和下载的进度更新。

【解决方案2】：

这是一个先有鸡还是先有蛋的问题。您将无法执行此操作，因为您需要加载资产以显示进度条小部件，届时您的页面将全部或部分下载。此外，您需要在用户请求之前知道页面的总大小，以便计算百分比。

这比它的价值更麻烦。

【讨论】：

我不是反对者，但看看我的情况； index.html 首先发送到客户端，其中包含 jQuery，内联 - 准备好文档 $(function() { /* here */ }) 我想获取一个大约 1MB 的巨大 .js 文件，因此向用户显示进度条是有意义的！
按需加载资产与加载包含多个源（图像、样式表、JavaScript 文件等）的网页不同。您可以实现一个进度条来按需加载单个文件，但不能实现对网页的基本 HTTP 请求。
@UяošKoт 可以模拟，是的。但是，在您实际下载该页面之前，您无法知道该页面有多大！
这是您在网络上很少看到的答案，您无法通过 http 来衡量网页的整体大小，并且尝试使其真实效率低下，大多数开发人员只是创建加载的错觉（通过测量他们的页面平均如何加载，并使栏在完全加载之前停止 100%）。这需要在网络上更公开地讨论。
@bytangle 还是很难做到准确。计算进度是比看起来更困难的事情之一。响应可以指示 HTML 响应将包含多少字节，但该数字不包括该页面上任何包含资产的大小，例如图像、样式表、JavaScript 文件等，它们将是单独的 HTTP 请求。

【解决方案3】：

简单的步骤，跟着他们，我想它会解决你的问题

在您的页面中包含这些 Css，

.progress {
      position: relative;
      height: 2px;
      display: block;
      width: 100%;
      background-color: white;
      border-radius: 2px;
      background-clip: padding-box;
      /*margin: 0.5rem 0 1rem 0;*/
      overflow: hidden;

    }
    .progress .indeterminate {
background-color:black; }
    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
              animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
    .progress .indeterminate:after {
      content: '';
      position: absolute;
      background-color: #2C67B1;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
              animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      -webkit-animation-delay: 1.15s;
              animation-delay: 1.15s; }

    @-webkit-keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @keyframes indeterminate {
      0% {
        left: -35%;
        right: 100%; }
      60% {
        left: 100%;
        right: -90%; }
      100% {
        left: 100%;
        right: -90%; } }
    @-webkit-keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }
    @keyframes indeterminate-short {
      0% {
        left: -200%;
        right: 100%; }
      60% {
        left: 107%;
        right: -8%; }
      100% {
        left: 107%;
        right: -8%; } }

然后在进度条中加入你的body标签，

<div class="progress" id="PreLoaderBar">
        <div class="indeterminate"></div>
    </div>

然后它将在您的页面加载时启动，现在您要做的就是在页面加载时隐藏它，或者使用 javascript 将可见性设置为无或隐藏，

document.onreadystatechange = function () {
            if (document.readyState === "complete") {
                console.log(document.readyState);
                document.getElementById("PreLoaderBar").style.display = "none";
            }
        }

如果您遇到任何问题，请告诉我，并且您可以添加任何类型的进度条，您可以轻松找到它们，对于这个示例，我使用了不确定的进度条。

【讨论】：

很棒的答案！
如果有人会使用这个，只是一个注释，style display none 不适合我删除它，所以我把它改成了 $(".PreLoaderBar").css("display" ， “没有”）;并在上面使用类。

【解决方案4】：

在这个示例中，我创建了一个 JavaScript 进度条（带有百分比显示），您可以使用 JavaScript 控制和隐藏它。

在此示例中，进度条每 100 毫秒前进一次。你可以在JSFiddle看到它

var elapsedTime = 0;
var interval = setInterval(function() {
  timer()
}, 100);

function progressbar(percent) {
  document.getElementById("prgsbarcolor").style.width = percent + '%';
  document.getElementById("prgsbartext").innerHTML = percent + '%';
}

function timer() {
  if (elapsedTime > 100) {
    document.getElementById("prgsbartext").style.color = "#FFF";
    document.getElementById("prgsbartext").innerHTML = "Completed.";
    if (elapsedTime >= 107) {
      clearInterval(interval);
      history.go(-1);
    }
  } else {
    progressbar(elapsedTime);
  }
  elapsedTime++;
}

【讨论】：

【解决方案5】：

看这里。

这里的完整教程绝对可以解决您的问题link

演示

document.onreadystatechange = function(e) {
  if (document.readyState == "interactive") {
    var all = document.getElementsByTagName("*");
    for (var i = 0, max = all.length; i < max; i++) {
      set_ele(all[i]);
    }
  }
}

function check_element(ele) {
  var all = document.getElementsByTagName("*");
  var totalele = all.length;
  var per_inc = 100 / all.length;

  if ($(ele).on()) {
    var prog_width = per_inc + Number(document.getElementById("progress_width").value);
    document.getElementById("progress_width").value = prog_width;
    $("#bar1").animate({
      width: prog_width + "%"
    }, 10, function() {
      if (document.getElementById("bar1").style.width == "100%") {
        $(".progress").fadeOut("slow");
      }
    });
  } else {
    set_ele(ele);
  }
}

function set_ele(set_element) {
  check_element(set_element);
}

body
{
  margin:0px; auto;
  padding:0px;
  font-family:helvetica;
}
.progress 
{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1
{
  text-align:center;
  font-size:35px;
  margin-top:60px;
  color:#A9BCF5;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='progress' id="progress_div">
   <div class='bar' id='bar1'></div>
   <div class='percent' id='percent1'></div>
</div>

<div id="wrapper">
   <div id="content">
     <h1>Display Progress Bar While Page Loads Using jQuery<p>TalkersCode.com</p></h1>
   </div>
</div>

<input type="hidden" id="progress_width" value="0">

【讨论】：