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

Question

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

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

因此，在用户单击按钮后的这 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 有什么建议吗？

Answer 1

你可以为此使用多线程。

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

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

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

Answer 2

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

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

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

包括这些新的 HTML 元素以使屏幕变暗并在屏幕中间放置一个 "PLEASE WAIT"。确保这些元素中使用的 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.
}

因此，当您单击启动长数据处理的按钮时，页面会变暗，中间会出现一个 "PLEASE WAIT"，直到它刷新。

如果您不使用或不想使用 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.
}

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

How do i show a simple loading message on the screen while my page fetches data from server?

html

c#

jquery

loading