jquery - 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 位于#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');
                }
            });
        }
    });  
});