Geek Answers Handbook

How to create page overlay while loading data - asp.net/jquery/blockui

I am trying to display an overlay that says "page loading ... wait" and data is being retrieved from sql server. I hope to use the BlockUI plugin for this, but something will do. I have an ASP.NET page using site.master. The plugin works, but no matter what I tried, it appears only after the page has been fully loaded.

The bulk of the wait comes to work done in the Global.asax file. In the Session_Start section, I have a function that returns data to populate the drop-down menus on my page. It takes about 20 seconds.

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

+5
source share
2 answers

Plugins will not use the trick to load pages.

If you want your page to be locked before it loads, the content blocking element must be part of your page and not generated by any plugin that always starts after loading your page. At some point in time.

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

And 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 the lock:

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

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

Important Notice

, , . , , , . unload . , , ( ).

, ,

, . , , . , . :

  • , ( - ?)
  • HTML- , :
    • META - , javascript
    • javascript - , Javascript (__doPostback -)

, - . , .

. , ( ) . . , , . , , (, / ). .

, , Asp.net . , , . . , , , .

, . , .

, , , . , , ( ) . , , , .NET- .

, .

+12

CSS. div, , . div "". , : none div javascript.

0

More articles:


All Articles