表单提交后显示进度条

Question

document.onreadystatechange = function () {

    var state = document.readyState

    if (state == 'complete') {
        document.getElementById('interactive');
        document.getElementById('loading').style.visibility="hidden";
    }
}

#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}

<div id="loading"></div>

我正在使用我在此处粘贴的代码在页面加载时显示加载器。

首先，我想在提交表单后将其更改为进度条，但我不知道该怎么做。其次，我正在使用的这个加载器代码是在页面加载几乎完成之后出现的。就在几秒钟之前，加载程序出现了，而不是在提交表单之后。

我正在使用 CGI 脚本（Perl 和 HTML）编写在服务器上运行的代码。

我已经粘贴了我现在用来生成 HTML 网页的示例 CGI 代码。你可以在第一行看到，我已经包含了 5 秒的睡眠，让你知道在那个地方我的代码将在那里从数据库中获取数据，这需要 5-6 秒的时间，然后根据输出它将在网页上打印。我唯一担心的是，在从数据库中获取数据时，网页一直在加载，并且没有显示我在第一个 div 中给出的加载器，当所有获取工作完成后，它会进入加载器并显示最后 1- 2 秒。如果我可以在获取时放置一个进度条（在这种情况下是 sleep(5)），那将是我的问题的解决方案。

sleep(5);

print "Content-type:text/html\n\n";
print <<ENDOFTEXT;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Carousel Inside Modal - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>
document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'complete') {
         document.getElementById('interactive');
         document.getElementById('loading').style.visibility="hidden";
  }
}
</script>
<style>
#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}
</style>
</head>
<body>
<div id="loading"></div>

<div class="container">
    <h1 align="center"> Webpage loading is done ! </h1>
</div>

</body>
</html>


ENDOFTEXT

Answer 1

您没有看到加载器的快速加载数据。我添加了一个小视频，它似乎有效。

document.onreadystatechange = function () {
  var state = document.readyState
    if (state == 'complete') {
          document.getElementById('interactive');    
          document.getElementById('loading').style.visibility="hidden";
    }

  
}

#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif") no-repeat center center rgba(0,0,0,0.25)
}

<div id="loading"></div>
<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

评论如果您正在谈论任何背景加载，例如Ajax