ajax submit 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位于#loaderdiv内部，则需要确保关闭标签：

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

如果这不是问题所在，您是否已检查以确保#loaderdiv在初始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');
                }
            });
        }
    });  
});