ajax提交gif

Question

我正在使用jquery.form插件，我不认为我的ajax加载gif在jQuery中放置了正确的选择。以下是我的代码，有人可以告诉我如何正确放置加载gif。

非常感谢。

jQuery的：

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#loader').css('visibility','visible');
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
})

HTML：

<div id="loader"> <img src="images/loader.gif" width="18" height="18" / >

CSS：

#loader{
    float:left;
    margin:0px;
    position:relative;
    visibility:hidden;
}

Answer 1

我看到的一个问题是，您发布的HTML格式不正确。如果您希望GIF位于#loader div内，则需要确保关闭代码：

<div id="loader">
  <img src="images/loader.gif" width="18" height="18"/>
</div>

如果这不是问题，请检查以确保您的#loader div正确显示，其初始visibility设置为visible？

修改：

另一个大问题是，只有在表单成功发布后才显示加载程序 - $('#loader').css('visibility','visible');处于成功回调状态。尝试将JS更改为：

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $('#loader').css('visibility','visible');
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
});