我不知道这是否可能，因为根据我的概念，它不是。假设我有一个表单：
<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>
现在，此表单至少需要 10-15 秒才能加载，因为显然有很多记录。我知道使用 AJAX 我可以加载 GIF 并加载记录。但是有没有一种方法可以在不使用 AJAX 的情况下，我可以在页面加载的那 15 秒内简单地显示 GIF。如果我使用windows.load功能，它只会在下一页上旋转。我需要的不是浏览器加载，而是我想要一个同时加载器在我的身体上。谢谢
您只需要在成功提交表单时向您展示加载器 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>-
您需要在 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);
$(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>您需要
使用 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>$(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>