提交表单后显示进度条

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

您的数据快速加载，也就是说您没有看到加载程序。 我添加了一个小视频，它似乎可以正常工作。

 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

提交表单后显示进度条

问题描述

1 个解决方案

解决方案1
0 2018-05-25 17:51:53

提交表单后显示进度条

问题描述

1 个解决方案

解决方案1 0 2018-05-25 17:51:53

解决方案1
0 2018-05-25 17:51:53