加载图像显示甚至在提交按钮被点击之前。为什么？

Question

我们希望在单击提交按钮后立即显示 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>

Answer 1

只需将 'display: none;' 放入 img 开头：

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

或在文档准备好时将其隐藏。

还要隐藏加载 gif，将其隐藏在您的成功和错误函数中或 'complete'。

ajax停止检查页面上的所有 ajax 请求，而不仅仅是您正在发出的请求，来自 jQuery 文档：注册一个处理程序，当所有 Ajax 请求完成时调用。

也不要在 'success' 或 'error' 或 'complete' 函数中使用你的 $loadingDiv 变量，它们是异步的，除非你传递它，否则变量将超出范围。再次 select div 和 jquery。

加载图像显示甚至在提交按钮被点击之前。为什么？

loading image displays even before submit button is clicked. Why?

ajax

jquery

json

webmethod