我不知道这是否可能，因为根据我的概念它不是。假设我有一个表格：
<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>
现在这个表单至少需要 10-15 秒才能加载，因为显然有很多记录。我知道使用 AJAX 我可以制作加载 GIF 并加载记录。但是有没有一种方法可以在不使用 AJAX 的情况下在页面加载时在 15 秒内简单地显示一个 GIF。如果我使用 windows.load 函数，它只会在下一页上旋转。我需要的不是浏览器加载，而是我想要在我的身体上同时加载。谢谢
【问题讨论】：
标签： javascript php jquery html ajax
$(document).ready(function(){
$("#myform").on("submit", function(){
$("#preloder").fadeIn();
});//submit
});//document ready/* Preloder */
#preloder {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999999;
/* background: #000; */
background: #ffffff;
}
.loader {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
border-radius: 60px;
animation: loader 0.8s linear infinite;
-webkit-animation: loader 0.8s linear infinite;
}
@keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border: 4px solid #056d4d;
/* border: 4px solid #f44336; */
border-left-color: transparent;
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border: 4px solid #056d4d;
/* border: 4px solid #673ab7; */
border-left-color: transparent;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border: 4px solid #056d4d;
border-left-color: transparent;
}
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
border: 4px solid #056d4d;
border-left-color: transparent;
}
50% {
-webkit-transform: rotate(180deg);
border: 4px solid #056d4d;
border-left-color: transparent;
}
100% {
-webkit-transform: rotate(360deg);
border: 4px solid #056d4d;
border-left-color: transparent;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<form id="myform">
<input type="text" name="fname" id="fname" value="" />
<input type="submit" value="Submit" />
</form>【讨论】：
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$(':submit').attr('disabled', 'disabled');
StartBlockPage()
}
});
});
$(function () {
StartBlockPage()
});
function StartBlockPage() {
var block_body = $("#body");
$(block_body).block({
message: '<div class="fa fa-spinner spinner spinner--steps2 font-large-5"></div><br /><br /><h2>Please wait until the server responds.</h2>',
overlayCSS: {
backgroundColor: '#FFF',
opacity: 0.8,
cursor: 'wait',
height: '200vh'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'transparent',
}
});
}
function CloseBlockPage() {
var block_body = $("#body");
$(block_body).unblock();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<html>
<body id="body">
</body>
</html>【讨论】：
您需要使用 blockUi Js 显示一个阻止页面，当您单击提交按钮时，它们将被阻止整个页面，您只需在全局范围内编写提交按钮单击事件。
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$(':submit').attr('disabled', 'disabled');
StartBlockPage()
}
});
});
$(function () {
StartBlockPage()
});
function StartBlockPage() {
var block_body = $("#body");
$(block_body).block({
message: '<div class="fa fa-spinner spinner spinner--steps2 font-large-5"></div><br /><br /><h2>Please wait until the server responds.</h2>',
overlayCSS: {
backgroundColor: '#FFF',
opacity: 0.8,
cursor: 'wait',
height: '200vh'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'transparent',
}
});
}
function CloseBlockPage() {
var block_body = $("#body");
$(block_body).unblock();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<html>
<body id="body">
</body>
</html>【讨论】：
您需要在 java 脚本中使用 setTimeout 函数，因为它可以让您的
加载器在您的网页中没有其他元素的情况下加载
突出显示。
使用 AJAX 的目的是在幕后加载所需的数据，这就是您的浏览器尝试
显示页面中的所有其他元素。
setTimeout(function(){
Loader.show();
$.ajax({
type: "GET",
url: "XXXXXXX.htm",
data: { your_data},
success:function(result)
{
Loader.hide();
},
complete:function(){
Loader.hide();
},
error:function(){
Loader.hide();
}
});
},1);
【讨论】：
您只需要在成功提交表单时向您显示加载器 gif。这样加载的gif就出现在页面上并一直显示，直到页面处理后重定向到下一页。除非您期望表单提交有任何错误，否则您不关心隐藏加载。只有在成功提交表单后，您才应该显示此加载程序。
$(document).ready(function(){
$("#myform").on("submit", function(){
$("#pageloader").fadeIn();
});//submit
});//document ready#pageloader
{
background: rgba( 255, 255, 255, 0.8 );
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 9999;
}
#pageloader img
{
left: 50%;
margin-left: -32px;
margin-top: -32px;
position: absolute;
top: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pageloader">
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div>
<form id="myform">
<input type="text" name="fname" id="fname" value="" />
<input type="submit" value="Submit" />
</form>【讨论】：