CODEWITHSUNDEEP
asp.nethtmlcssvb.net
user1987631
user1987631

Reputation:

How to display a loading message or design while the page is loading in asp.net?

How to display a loading message or image while the page is loading?

For example, when I click a button for adding items, it takes some time to finish loading, while it is loading, the page is active. What I want is a little loader to appear in the middle of the page and that page will turn inactive. When the page has finished loading, the loader will be gone and the page will get active.

Upvotes: 2

Views: 3764

Answers (3)

Jonathan
Jonathan

Reputation: 2358

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

Upvotes: 0

NetStarter
NetStarter

Reputation: 3225

This is what i have tried I had used YUI for this and added a panel to my code when the button is click

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

When the background is executed successfully you can call the method for stopping the animation as

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

Thanks for more details you can see Here

Upvotes: 0

bAN
bAN

Reputation: 13825

Assuming you are using ASP.NET Webforms

You can easily use an UpdatePanel associated with an UpdateProgress control.

UpdatePanel allow you to use async to interact with server. You can add an UpdateProgress control and link it with the UpdatePanel to show something (Gif, Text,..) when loading is in progress.

Find more informations Here

If you are using Asp.net MVC, you have to do the same trick using Ajax like in this SO question.

Upvotes: 1

Related Questions