Initial form request / redirect show page loading

Question

I am working on an asp.net web form project which has a site.master page as well as other aspx pages that use the site master.

I have a div on the site master as such:

<div id="msg" class="dialog">loading, please wait...</div>

Full context of it (the site master) is as such (note im keeping it simple here):

<body id="pageContainer">
    <div id="msg" class="dialog">loading, please wait...</div>
    <div id="pageBody">
    <form id="formMaster" runat="server">
    </form>
    </div>
</body>

The class=dialog is defined as such for the div:

.dialog {
    display: none;
    width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

Basically I use this when I want to display "loading please wait" across requests, and I turn it on / off via jquery:

     // Simulate some time before everything's loaded
     setTimeout(function () {
         $("#msg").fadeOut(function () {
             // Wait for #msg to fade out before fading in #pageBody
             $("#pageBody").animate({
                 opacity: "1.0"
             }, 1);
         });
     }, 1);

This is done inside of $(document).ready() . I need to simulate some time and then I make the pageBody div visible (using the opacity property)...This seems to work fine but upon initial say hyperlink clicks / submits that redirect a user to another page the loading doesn't show up right away...it takes quite some time to show up confusing the user.

For instance if I have a simple hyperlinked page (where that page has LOTS of database data)...The initial click of that hyperlink shows the spinning circle (in chromes tab) and then finally takes you to that page. At that point my loading div comes up and finally that fades out and the page is shown. I was hoping instantly my loading div can come up so that the user knows something is happening. Most of our users are not too savvy on the web so they dont even pay attention to the browser spinning wheel, they just think the page is not responding (I dont blame them, this can be tricky).

What can I do so that this loading, please wait... div comes up almost instantaneously? Or even can I ?

Answer 1

Yes you can, using Javascript/jQuery and a begin-end request.

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginLoading);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endLoading);

function beginLoading(sender, args) {
    var LoadingDiv = $find(LoadingDiv);
    if (LoadingDiv!= null) {
        LoadingDiv.show();
    }
}

function endLoading(sender, args) {
    var LoadingDiv = $find(LoadingDiv);
    if (LoadingDiv != null) {
        LoadingDiv.hide();
    }
}

Initial form request / redirect show page loading

Question

1 answers

solution1
0 2014-12-18 22:02:21

Initial form request / redirect show page loading

Question

1 answers

solution1 0 2014-12-18 22:02:21

solution1
0 2014-12-18 22:02:21