如何在 asp.net 中加载页面时显示加载消息或设计？答案

【问题标题】：How to display a loading message or design while the page is loading in asp.net?如何在 asp.net 中加载页面时显示加载消息或设计？
【发布时间】：2013-01-05 08:21:00
【问题描述】：

如何在页面加载时显示加载消息或图像？

例如，当我单击添加项目的按钮时，需要一些时间才能完成加载，而在加载时，页面处于活动状态。我想要的是在页面中间出现一个小加载器，并且该页面将变为非活动状态。页面加载完成后，加载器将消失，页面将变为活动状态。

【问题讨论】：

您使用什么语言/技术（除了 asp.net）？
设置一个 div 并在按钮单击时加载 img 或 msg 和 display:Block，并在代码集末尾的服务器端 display:none。
@StefanSteinegger - 我正在使用 vb、html 和 css
这可能值得检查this answer from webarto。
@Echilon- 感谢您的建议，但我想要仅使用 asp.net、vb、html 和 ccs 生成加载程序。

标签： asp.net html css vb.net

【解决方案1】：

假设您使用的是 ASP.NET Webforms

您可以轻松地使用与UpdateProgress 控件关联的UpdatePanel。

UpdatePanel 允许您使用异步与服务器交互。您可以添加一个 UpdateProgress 控件并将其与 UpdatePanel 链接以在加载过程中显示某些内容（Gif、Text、..）。

查找更多信息Here

如果您使用的是 Asp.net MVC，则必须使用 Ajax 执行与 this SO 问题中相同的技巧。

【讨论】：

【解决方案2】：

这是我尝试过的我为此使用了 YUI，并在单击按钮时在我的代码中添加了一个面板

var ANIM_LOAD = YAHOO.namespace("anim_load");
ON button_onClick()
{
StartInitialLoadingPanel("Loading");
}
StartInitialLoadingPanel(msgStrng)
{
if (!TAB_COLLECTION.wait) {

        // Initialize the temporary Panel to display while waiting for external content to load
        TAB_COLLECTION.wait = new YAHOO.widget.Panel("wait",  
                                                                { width: "400px",
                                                                  x: window.screen.center,
                                                                  fixedcenter: true, 
                                                                  close: false, 
                                                                  draggable: false, 
                                                                  zindex:1000,
                                                                  modal: true,
                                                                  visible: true
                                                                } 
                                                              );

        TAB_COLLECTION.wait.setHeader(msgStr);

        TAB_COLLECTION.wait.setBody("<img src='../Images/loading_animation'>");

        TAB_COLLECTION.wait.render(document.body);
    }

    // Show the Panel
    TAB_COLLECTION.wait.show();
}

后台执行成功后可以调用停止动画的方法

function CancelInitialLoadPanel()
{
    //Hide the Panel    
    if (TAB_COLLECTION.wait) 
    {
        TAB_COLLECTION.wait.hide();
    }
}

感谢您可以查看Here的更多详细信息

【讨论】：

您必须在单击按钮时调用函数然后调用面板函数的代码......您也可以看看icant.co.uk/sandbox/yuipanel

【解决方案3】：

这里有两个类似问题的链接。不确定如何管理呈现整个页面所需的时间，但这可能是一个开始。

Hiding page loading

The page loading animation for hiding whole page load process ends long before It must fade out

这是一个使用定时器控件的 Display Ajax Loader while page rendering

$(document).ready(function(){
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
$(window).load(function(){ 
    $('#loading').fadeOut(600, function(){
        $("#wrap").fadeIn(1000);
        $("#footer").fadeIn(1000);
    });
});

【讨论】：