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