如何在执行jQuery提交表单时显示加载动画？

Question

我想在执行提交操作时显示一个简单的旋转图标（需要一些时间，因为我必须通过 Web 服务与提供者建立通信）。

所以，我有以下代码：

$('#gds_form').submit(function() {
        var pass = true;
        //some validations

        if(pass == false){
            return false;
        }

        $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
        $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
        return true;
    });

问题是，这个 .gif 没有展示任何动画，就像被冻结了一样。

为什么会这样呢？

还有其他实现方式吗？（请注意我不使用 AJAX，也不想使用）

谢谢。

- content01

---

我假设你正在使用一个动画 GIF，并且如果你“正常”显示它，它会动起来。 - Muad'Dib

如果 gif 被冻结了，那与 JavaScript/jQuery 没有任何关系。 - Sparky

由于IE6、IE7和IE8存在缺陷，gif动画会被冻结。我还不知道IE9的情况，但是我可以肯定，在所有其他浏览器上gif动画不会冻结。阅读此处的正确答案以及一些可能的解决方法。 - Marco Demaio

我的Ubuntu/Firefox上gif动画卡住了，但在我的Ubuntu/Chromium上没有。 - Pierre de LESPINAY

Answer 1

使用 jQuery 的 submit 函数，您可以像这样指定一个加载图像：

$('#form').submit(function() {
    $('#wait').show();
    $.post('/somepage.htm', function() {
        $('#wait').hide();
    });
    return false;
});

- James Johnson

---

使用 show hide 结合 submit 函数效果很好，简单而且稳健。 - codepuppy

Answer 2

你是否尝试在文档准备就绪时加载图像，并将其隐藏，然后在函数中显示它？这样，图像已经被加载并且正在旋转。

$(document).ready(function() {
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");
});

$('#gds_form').submit(function() {
    var pass = true;
    //some validations

    if(pass == false){
        return false;
    }
    $("#overlay, #PleaseWait").show();

    return true;
});

- Challe

---

这个有用吗？？？在我的测试中，在IE7和IE8下图像仍然会冻结，在所有其他浏览器中，图像直到服务器响应到达后才不会冻结。 - Marco Demaio

这在我的Ubuntu/Firefox上不起作用（gif动画会冻结）。 - Pierre de LESPINAY

Answer 3

您的实现存在一个真正的问题，那就是客户端如何知道您的请求何时完成。Ajax有助于解决这个问题的原因之一是我们有状态的概念，因此我们可以在客户端等待响应时显示加载器，并在客户端接收到响应后删除加载器。

您将如何确定与Web服务的通信何时完成？您说您不想使用Ajax，但如果您要查询服务以确定通信是否完成，则可能需要使用Ajax。

- Jose Vega

---

这是一个常规的表单提交，当你点击它时，浏览器不会将你带走，直到服务器响应请求，给动画旋转一点时间。然而，在IE（测试7-9）中，开始请求会冻结动画，即使它已经在页面上旋转。 - Esailija

Answer 4

使用.show()和.hide()来切换加载动画，同时发送数据吗？

- Hazza

Answer 5

我希望页面上的div以style='display:none'开始，然后在需要它出现时在你的代码中加入$('#PleaseWait').show()。

如果你不加display:none，你可以编辑看看它的样子，而不需要一遍又一遍地提交表单。

NB： 为了方便起见，您可能希望将覆盖层和gif包装在父div中。

- Ben