Question

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

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

Answer 1

假设您使用的是ASP.NET Webforms

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

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

查找更多信息Here

如果你使用的是Asp.net MVC，你必须使用像this SO问题中的Ajax那样做。

Answer 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

Answer 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);
    });
});

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

3 个答案: