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）来编写在服务器上运行的代码。

我已经粘贴了一个示例CGI代码，我正在使用它来生成HTML网页。你可以在第一行看到，我已经包含了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

您的数据很快加载，您没有看到装载机。我添加了一个小视频，看起来很有效。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您正在讨论Ajax

等任何后台加载，请注释

表单提交后显示进度条

1 个答案: