当我的页面从服务器获取数据时，如何在屏幕上显示简单的加载消息？答案

【问题标题】：How do i show a simple loading message on the screen while my page fetches data from server?当我的页面从服务器获取数据时，如何在屏幕上显示简单的加载消息？
【发布时间】：2015-02-20 14:28:28
【问题描述】：

我如何在网页加载时在蒙版屏幕上显示简单的加载消息。

我有一个产品比较页面，单击按钮即可调用该页面。现在比较页面需要大约 4 秒来加载。这是因为存储过程需要大约 3.5 秒才能返回结果。

因此，在用户单击按钮后的这 4 秒内，我们看到前一个屏幕，标签上只有微调器，表明页面正在被重定向。有什么方法可以在加载下一页之前显示当前页面被涂黑的页面掩码..

我重定向到比较页面的方式是一个 c# 函数

protected void redirect_comparepage(object sender, EventArgs e)
{
    Response.Redirect("~/ProductComparison.aspx", false);
}

我尝试在比较页面上执行以下操作，但它不起作用。

How to display a loading screen while site content loads 有什么建议吗？

【问题讨论】：

'但是它不起作用' - 你到底是什么意思？发布一些代码以显示您到目前为止所拥有的内容。您是否看过存储过程以查看其性能是否可以提高？恕我直言，最好解决原因而不是症状。
好吧，SP 的性能无法进一步提高> 我不想深入探讨，但请告诉我，如果不改变 Db 结构，我们现在无法进一步即兴发挥它.. .

标签： c# jquery html loading

【解决方案1】：

这样的事情怎么样？我用了一点 jQuery。

将 OnClientClick 添加到您的按钮控件以启动魔术...

<asp:Button runat="server" ID="SubmitButton" Text="Submit" 
OnClientClick="pleaseWait();" />

包含这些新的 HTML 元素以使屏幕变暗并在屏幕中间放置“请稍候”。确保这些元素中使用的 z-index 高于页面上的任何其他元素。 1000 和 1001 应该做得很好......

<div id="modal" class="modal" style="background-color:rgba(64,64,64,0.5);width:100%;height:100%;z-index:1000;display:none">
</div>
<div id="wait" class="modal" style="width:300px;height:200px;margin:100px auto 0 auto;display:none;background-color:#fff;z-index:1001;text-align:center;">
    PLEASE WAIT...
</div>

这里是 OnClientClick 函数。它只是使用 JQuery 使 HTML 元素出现......

function pleaseWait(){
    $(".modal").show();
    return true; // Can't remember if this is needed; but it won't hurt.
}

因此，当您单击启动长数据处理的按钮时，页面会变暗，并且中间会出现“请稍候”，直到它刷新为止。

如果你不使用或不想使用 jQuery，你的 pleaseWait() 函数看起来像这样......

function pleaseWait(){
    document.getElementById("modal").style.display = "block";
    document.getElementById("wait").style.display = "block";
    return true; // Can't remember if this is needed; but it won't hurt.
}

【讨论】：

【解决方案2】：

您可以为此使用多线程。

private void ThreadCall(){
            Thread thread = new Thread(new ThreadStart(FetchData));
            thread.Start();
        }
        private void FetchData(){
            //your code here
        }

将您的获取代码放入 FetchData() 中，然后从您的主函数中调用 ThreadCall() ..

如果您提供代码和有关您的问题的更多信息，它可能会得到更好的答案..

【讨论】：