jquery始终显示“正在加载” div答案

【问题标题】：jquery shows "Loading" div at all timesjquery始终显示“正在加载” div
【发布时间】：2020-07-28 16:23:47
【问题描述】：

我已将代码（可在另一个 ASP.Net 应用程序中使用）添加到一个非常简单的页面中。当单击按钮 (btnSubmit) 时，它应该显示一个带有单词“Loading”的微调器。然而，它所做的是显示微调器并在页面加载的瞬间“加载”。这是aspx页面：

<%@ Page Title="" Language="C#" MasterPageFile="~/default.master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="SAM2.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
    function ShowProgress() {
      setTimeout(function() {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({
          top: top,
          left: left
        });
      }, 200);
    }
    
    $('form').live("submit", function() {
      ShowProgress();
    });
  </script>
  <div class="loading" align="center">
    Loading. Please wait.<br /><br />
    <img src="/images/ajax-loader.gif" />
  </div>
  <asp:TextBox runat="server" ID="tbTest" />
  <asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />
</asp:Content>

在我后面的代码中：

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
    ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
  }
}

我尝试在 ShowProgress() 函数上方添加这个：

$(window).on('load', function () {
  $("#loading").hide();
});

但这无济于事。正如我所说，这适用于另一个应用程序。我不是 jquery 大师，所以我错过了什么？

【问题讨论】：

您注册的启动脚本触发了对提交按钮的点击，该按钮又提交了显示加载器的表单。
正如我所说，我不是 jquery 大师。我该如何解决？
那不是 JS，它在您发布的 C# 中。删除ClientScript.RegisterStartupScript 行，并通过代理整个Page_Load() 处理程序，如果这就是它所包含的全部
即使我注释掉 ClientScript 行，甚至是 Page_Load 中的所有内容，微调器仍然显示。如何让它仅在按下 btnSubmit 后显示？

标签： javascript jquery asp.net

【解决方案1】：

hide 方法找不到“加载”ID。将 div ID 设置为“正在加载”，您可能还需要 runat=server。

  <div class="loading" id="loading" runat="server" align="center">

【讨论】：

对不起，没有。我添加了 id 和 runat 但它仍然显示页面加载的瞬间。我只想在单击提交按钮时显示。
fadeout() 调用在哪里？还要确保您已连接到 jquery 文件，尝试下载它们并在本地引用它们以排除连接问题。
我应该把淡出（）调用放在哪里？我真的不太擅长jquery，所以我不知道....

【解决方案2】：

在你的脚本标签中调用它的加载函数。这应该在页面加载时隐藏/淡出 div id 'loading'。

 <script>
    $(window).load(function () 
     {
        $('#loading').fadeOut();
    });  
 </script>

【讨论】：

不，抱歉。我将它添加到脚本块的顶部，但微调器仍然会在页面加载后立即出现。