How to create page overlay while data is loading - asp.net/jquery/blockui
Asked Answered
R

2

5

I'm trying to display an overlay that says "page loading...please wait" while data is being retrived from a sql server. I'm hoping to use the BlockUI plugin for this but anything will do. I have an ASP.NET page using a site.master. The plugin works but no matter what I tried, it only appears AFTER the page was fully loaded.

The bulk of the waiting is down to work done in the Global.asax file. In the Session_Start section, I have a function that returns data to populate dropdown menus on my page. This takes about 20 seconds to complete.

So, what do I need to do in order to view the overlay BEFORE the page is fully loaded? Thanks for any help or advice.

Runck answered 26/10, 2011 at 10:52 Comment(0)
A
14

For loading pages, plugins won't do the trick

If you want your page to be blocked until it's loaded, content blocker element should be part of your page and not generated by any plugin that always run after your page has loaded. At some point in time or another.

<body>
   ...
   <!-- make it last -->
   <div id="blocker">
       <div>Loading...</div>
   </div>
</body>

And have CSS do the rest

#blocker
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
}
    #blocker div
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5em;
        height: 2em;
        margin: -1em 0 0 -2.5em;
        color: #fff;
        font-weight: bold;
    }

And Javascript that clears blocking:

$(function(){
    $("#blocker").hide();
});

This is a working example using the code above. It removes blocker on timeout, because it's such a simple document.

Important notice

But maybe you're not understanding this the right way. Maybe you would like to block existing page when it posts back to server, because that's a different story. In this case your plugins should suffice and should run on unload window event and display blocker element. This would block existing page while it posts back its data and before browser starts receiving new content (which can be blocked with previously shown technique).

It seems the problem is browser waiting for server response

It's hard to tell since you can't pin point it yourself. But suppose the problem is that browser is waiting for server to respond. And as you mention session loading is slow. Two things:

  1. Optimise DB call to get those menu data quicker (if it really takes that long - have you checked with profiler?)
  2. Have a static default HTML page that displays the Loading content and executes a redirect:
    • using a META refresh tag - safer for old browsers and those without javascript
    • javascript - better for modern pages and especially because your page is using Javascript (__doPostback anyone)

It seems that your best bet is the combination of both. But go one step at a time and see if it's better.

One more thing. I know that waiting for the first response (application start) takes some time. It does so on many pages. But people usually don't really bother since users can't do no harm with data because it's still not displayed. It's much worse when your response times are long when using the page, because users tend to click the same button several times (when creating/updating data for instance). That is much more harmful.

And maybe you're confusing the Asp.net application start-up with your session loading. When you application first starts it takes much longer for server to respond, because it has to compile your application and start it up. This can take considerable time. There are several workarounds for that that include changes to application recycling times and separate heartbeat services that make tiny requests to application just to keep it alive during longer time of inactivity.

You should also take into account that your in development page is running on a desktop machine. You should know whether your server is faster.

So maybe it's not the session creation but rather application start-up. You should tell the difference by opening a page in a browser and waiting for it to complete, then close the browser and opening it again (so new session will get created) and access your application. If it loads faster then it's not your session's fault but rather application start-up when .net framework has to compile your application.

Define the problem first then start mitigation.

Abrego answered 26/10, 2011 at 10:58 Comment(7)
Robert, how would the plugin work with the unload event? I'll give your first solution a try but I would like to try the plugin as well.Runck
Robert, the wait is only done the first time the user opens a browser and loads the page. After that, there's no wait.Runck
I tried your original solution and it didn't work, the div doesn't show for some reason. Remember, I'm using Page.Master and this is where I added the div code. I added the css to the existing style.css file so that should be fine. No idea why it's not working.Runck
@bearaman: I think you're having a bit of a problem with understanding how things work. Maybe you're referring to browser waiting for server response. And the first time round nothing's displayed (blank page). Afterwards your pages are waiting for the next one to load. Maybe what you're trying to achieve is a similar thing to what GMail is doing with the loading front page.Abrego
Robert, I probably am :-) I think the problem is that no part of the HTML is loaded as the session_start is busy bringing data back from the server. Once this is finished, the page is displayed instantly. Could this be the reason why the above solution didn't work? Any solution to work around this? Thanks for your expert help.Runck
Robert, thanks for your help. I got this working by doing something pretty simple. I just moved the heavy loading stuff out of the session_start and into the page_load and made another page my start page. This way, when I click on the heavy load page, I now can show the blockui plugin. Thanks for your help. JohnRunck
I just came across a similar situation where I have to use something like this. Thank you for the wonderful solution :)Famulus
Y
1

you could do it with CSS. Create a div positioned absolute, on top of everything. Inside that div you can write your 'Loading' message. When the page has done loading, you can set display:none on that div using javascript.

Ytterbite answered 26/10, 2011 at 11:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.