2

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

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

4

3 回答 3

1

假设您使用的是 ASP.NET Webforms

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

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

在此处查找更多信息

如果您使用的是 Asp.net MVC，则必须像在这个SO question 中那样使用 Ajax 执行相同的技巧。

于 2013-01-22T14:05:21.750 回答
0

Here are two links of similar issues. Not sure how to manage the period it takes to render whole page but this might be a start.

Hiding page loading

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

Here is one using a timer control 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);
    });
});
于 2013-01-24T09:11:32.583 回答
0

这就是我尝试过的，我为此使用了 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();
    }
}

感谢您提供更多详细信息，您可以在此处查看

于 2013-01-24T09:06:47.010 回答