Question

我不知道这是否可行，因为根据我的概念，它不是。我有一个表格：

<form action="/loadLotsOfRecords" method="get">
<input type="text" name="email" />
<input type="submit />
</form>

现在这个表单需要至少10-15秒才能加载，因为显然有很多记录。我知道使用AJAX我可以加载GIF并加载记录。但是有没有一种方法可以在不使用AJAX的情况下在页面加载时在15秒内显示GIF。如果我使用windows.load函数，它只会在下一页上旋转。我需要的是代替浏览器加载我想在我的身体上同时加载。感谢

Answer 1

您只需要在成功提交表单时向您显示加载程序gif。通过这种方式，加载gif出现在页面上并一直显示，直到处理后页面被重定向到下一页。除非您预计表单提交中有任何错误，否则您不必关心隐藏加载。只有在成功提交表单时才应显示此加载程序。

＆＃13;

yum -y install gcc-c++

＆＃13;

$(document).ready(function(){
  $("#myform").on("submit", function(){
    $("#pageloader").fadeIn();
  });//submit
});//document ready

＆＃13;

#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%;
}

＆＃13;

Answer 2

您需要使用blockUi显示阻止页面，当您单击提交按钮时，它们将被阻止为整页。您只需全局编写提交按钮单击事件即可。

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

Answer 3

您需要在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);

Answer 4

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

在正常表单上加载GIF提交

4 个答案: