Hide Web Form Contents until the
Hide Web Form Contents until the page is fully loaded
If your web forms consist of small amount of content they render quickly in
the browser and user can start working with them almost immediately. However,
when your web forms are bulky and render too much of content, the page is loaded
in the browser slowly. Users can start using the partially loaded page and
perform actions such as clicking on links or buttons. At times this is
undesirable and you want users to wait till the complete page is loaded in the
browser. You can accomplish this with the help of little client side script.
Let's see how.
First of all, create a new ASP.NET web site and add a few controls on it. As
an example, I am going to use a GridView that displays Customers table from the
Northwind database.
You will be using jQuery code in this example so ensure that you have
referred the jQuery library in the web form.
<script src="/scripts/jQuery.js" type="text/javascript"></script>
Next, wrap the entire contents of the web form inside a <DIV> element as
shown below:
<div id="divContainer">
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" ...>
...
</asp:GridView>
</div>
The <DIV> element has ID divContainer and it acts merely as a container
to the GridView and SqlDataSource control.
Now, add a <script> block in the <head> section as shown below:
<script type="text/javascript">
var divMsg = $("<div>Please wait...page is loading...</div>");
</script>
Here, you are creating a new <DIV> element on the fly that has a wait
message. Notice how the code stores the dynamically loaded element reference in
a global variable. This way you can access the dynamically created <DIV> later
in the code. This dynamically created <DIV> is added to the <body> of the page
so that the end user sees its contents. To do so, add the following code just
below the <div id="divContainer"> markup:
<script type="text/javascript">
$("body").append(divMsg);
$("#divContainer").hide();
</script>
Here, the code uses jQuery append() method and appends the divMsg element to
the body of the page. It then hides the divContainer element using hide()
method. This way entire contents of divContainer i.e. GridView will be hidden
from the end user and user will see only the wait message.
When the page is fully loaded you should show the divContainer and remove the
dynamically added wait message. This is done in the ready() event handler as
shown below:
<script type="text/javascript">
var divMsg = $("<div>Please wait...page is loading...</div>");
$(document).ready(function () {
alert('Click OK to display page content');
$("#divContainer").show();
divMsg.remove();
});
</script>
The code inside the ready() event handler calls show() method on the
divContainer so that the GridView is visible. It then removes divMsg using
remove() method. The alert() at the beginning of the code is just for the sake
of testing and you can remove if required.
That's it! Run the web form and you should see something like this:
Notice how the GridView is yet to be displayed and how the wait message is
displayed instead. Once you click on the OK button, GridView will be displayed
and the wait message will disappear.
If you do not wish to display any wait message you can call hide() and show()
methods on body element directly.
<head runat="server">
...
<script type="text/javascript">
$(document).ready(function () {
alert('Click OK to display page content');
$("body").show();
});
</script>
</head>
<body>
<script type="text/javascript">
$("body").hide();
</script>
<form id="form1" runat="server">
...
In this case divContainer is not necessary. Remember, however, that till the
page is not loaded completely the end user will see a blank browser window.