Sometimes our web pages get more time to load
on the browser and block the UI portion of web page until the page is completely
loaded. This makes the user confuse to what to do in that condition, if user try
to click any control in web page, then the browser got in not responding (hanged
condition) situation. So, Here I will decided to show a page loader on the
screen to the user. until the page is loaded completely. This will intimate the
user that page is loading and avoid any hanged situation of browser.
Add some css style.
<style>
#dvLoading
{
background:
url(loader.gif) no-repeat
center center;
height:
100px;
width: 100px;
position:
fixed;
z-index:
1000;
left: 50%;
top: 50%;
margin:
-25px 0 0
-25px;
}
.ui-widget-overlay
{
background:
url(overlay.png) repeat;
left: 0;
opacity: 0.9;
position:
absolute;
top: 0;
}
</style>
Here is the script for showing loading
image.
<script
src="jquery-1.3.2.js"
type="text/javascript"></script>
<script
src="jquery.js"
type="text/javascript"></script>
<script
src="jquery.min.js"
type="text/javascript"></script>
<script>
$.fn.SetOverlayHeightWidth
= function () {
$(this).height($(document).height());
$(this).width($(document).width());
};
$(document).ready(function
() {
$(".overlayforaddNote").show().SetOverlayHeightWidth();
$('#dvLoading').fadeOut(4000);
setTimeout(function
() { $(".overlayforaddNote").hide() }, 4000);
});
</script>
And at last UI block.
<body>
<form
id="form1"
runat="server">
<div>
<asp:Label
ID="time1"
runat="server"></asp:Label>
<asp:Button
ID="su"
runat="server"
OnClick="update"
/>
</div>
<div
id="dvLoading">
</div>
<div
style="display:
none;" class="ui-widget-overlay
overlayforaddNote">
</div>
</form>
</body>
Output.
![Clipboard04.png]()