Introduction:
Here I will explain how to use jQuery to show loading image while page loading in jQuery or show loading image in webpage while page loading instead of blank page in jQuery.
Description:
In previous articles I explained jQuery query string parameter values with spaces, jQuery hide div elements after 5 seconds, jQuery check given date greater than current date jQuery Remove first/last character from string, Scroll back to top plugin Examples, jQuery create rounded corners for textbox and many articles relating to JQuery. Now I will explain how to show loading image while page loading in jQuery.
In previous articles I explained jQuery query string parameter values with spaces, jQuery hide div elements after 5 seconds, jQuery check given date greater than current date jQuery Remove first/last character from string, Scroll back to top plugin Examples, jQuery create rounded corners for textbox and many articles relating to JQuery. Now I will explain how to show loading image while page loading in jQuery.
To
show loading image on page load we need to define load function in jQuery
during pageload
and need to write css class to show loading image for that we need to write
code like as shown below
// jQuery
Plugin and calling function in page load
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#pageloaddiv").fadeOut(2000);
});
</script>
// CSS Class
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('pageloader.gif')
no-repeat center
center;
}
</style>
// loading
div to show loading image
<div id="pageloaddiv"></div>
|
If
you want check this code in complete example check below code
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Loading Image while Page loading</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#pageloaddiv").fadeOut(2000);
});
</script>
<style type="text/css">
#pageloaddiv {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url('pageloader.gif')
no-repeat center
center;
}
</style>
</head>
<body>
<div id="pageloaddiv"></div>
</body>
</html>
|
Live
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
13 comments :
nice article
Thanx a lot....right on time..!!!
hi suresh,
i tried this code http://jsfiddle.net/JzzWR/ like this. it not showing circle as you presented in demo. What changes i have to made to implement this?
Sir Please Give Comment to Each line For under Standing Purpose and This is Very helpful to freshers Like me
it very helpful to me
Hi suresh
Actually i want busy extender on page load .
Means first load master page and show the busy extender image on content page .If you have any idea or code so please suggest me.
its working fine
but when i use thread.sleep() method to delay page loading in page_load() event its not showing at first
but that image is showing before page loads
Thanks for sharing.. One question, instead of hardcoding fadeout time as "2000" like $("#pageloaddiv").fadeOut(2000); how can we assign the actual page response time. One page may get rendered quickly and the other may time. or the same page render time would differ due to network traffic, etc..
Thanks
its working but where in put my execution code here, i placed my code each and every place in your code but its not showing image while execution but display only after page loaded, please give with some execution code
Hi suresh,
The above functionality without using fadeout, and loading the images until the page is loading.?
Thanks and Regrds,
Elangovan.S
its working but what i want is this image should be displayed only until the database results are retrieved
its working but what i want is this image should be displayed only until the database results are retrieved
Note: Only a member of this blog may post a comment.