Jquery 即使在单击“提交”按钮之前，也会显示加载图像。为什么？

我们希望在单击提交按钮后立即显示gif加载消息，然后在数据加载完成后立即消失

到目前为止，效果不是很好

一旦页面加载，但在单击提交按钮之前，gif加载程序将显示，即使数据加载完成，gif加载程序也将保持显示状态

我如何解决这个问题

   $("#btnSubmit").click(function (event) {
      event.preventDefault();
     if (confirm('Please verify that your information is correct before submitting.')) {
    var empComplete = false, sourceComplete = false, spouseComplete = false, dividentComplete = false, reimbursedComplete = false, honorariaComplete = false, giftComplete = false, orgComplete = false, creditorComplete = false;
    function checkComplete() {
     if (empComplete && sourceComplete && spouseComplete && dividentComplete && reimbursedComplete && honorariaComplete && giftComplete && orgComplete && creditorComplete) {
    $("#result").text("Thank you! You have successfully completed this form");
     }
    }

//Loading message handler
    var $loading = $('#loadingDiv').hide();
    $(document)
    .ajaxStart(function () {
    $loading.show();
    })
    .ajaxStop(function () {
    $loading.hide();
    });

    $("#result").text("");
    var data = JSON.stringify(getAllEmpData());
    console.log(data);
    $.ajax({
    url: 'disclosures.aspx/SaveEmpData',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ 'empdata': data }),
    async: false,
    success: function () {
    empComplete = true;
    checkComplete();
    },
    error: function () {
    alert("Error while inserting data");
    }
    });
    }
    )};
    ...
    ...
    </script>

    //Markup

     <input type="submit" id="btnSubmit" class="btn btn-primary btn-md pull-center btn-sm" value="Submit" /><img id="loadingDiv" src="images/ajax-loader.gif" alt="Loading..." />
    <output id="result" style="margin-bottom:300px;margin-left:250px;color:#3c890e;font-weight:bold;font-size:18px;"></output>

$（“#btnSubmit”）。单击（函数（事件）{
event.preventDefault（）；
如果（确认（'请在提交前验证您的信息是否正确'））{
var empComplete=false、sourceComplete=false、SpooseComplete=false、DividIdentitComplete=false、RequiredComplete=false、荣誉Complete=false、giftComplete=false、orgComplete=false、creditorComplete=false；
函数checkComplete（）{
如果（empComplete&&sourceComplete&&SpooseComplete&&DivisionComplete&&RequiredComplete&&GfusionComplete&&giftComplete&&orgComplete&&creditorComplete）{
$（“#结果”）.text（“谢谢！您已成功填写此表格”）；
}
}
//加载消息处理程序
var$loading=$（'#loadingDiv'）.hide（）；
$（文件）
.ajaxStart（函数（）{
$loading.show（）；
})
.ajaxStop（功能（）{
$loading.hide（）；
});
$（“#结果”）.text（“”）；
var data=JSON.stringify（getAllEmpData（））；
控制台日志（数据）；
$.ajax({
url:“dispositions.aspx/SaveEmpData”，
键入：“POST”，
contentType:'application/json；charset=utf-8'，
data:JSON.stringify（{'empdata'：data}），
async:false，
成功：函数（）{
empComplete=true；
检查完成（）；
},
错误：函数（）{
警报（“插入数据时出错”）；
}
});
}
)};
...
...
//加价

只需输入“display:none；”首先，请参阅img：

<img id="loadingDiv" style="display:none;" src="images/ajax-loader.gif" alt="Loading..." />

或者将其隐藏在文档准备好的位置

此外，要隐藏加载的gif，请将其隐藏在成功和错误函数或“完成”中

ajaxStop从jQuery文档中检查页面上的所有ajax请求，而不仅仅是您正在进行的请求： 注册一个在所有Ajax请求完成时调用的处理程序

---

另外，不要在“success”或“error”或“complete”函数中使用$loadingDiv变量。它们是异步的，除非传入变量，否则该变量将超出范围。只需再次使用jquery选择div。

您也可以提供html吗？@Nicholas，它位于底部，就在submit按钮旁边。谢谢你的回复。