Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show Loading Image While Page Loads or Show Loading Image in Webpage while Page Loads

Sep 10, 2013
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.


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 RSS subscribe by email Subscribe by Email

13 comments :

Anonymous said...

nice article

Unknown said...

Thanx a lot....right on time..!!!

Unknown said...

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?

Unknown said...
This comment has been removed by the author.
Unknown said...

Sir Please Give Comment to Each line For under Standing Purpose and This is Very helpful to freshers Like me

Anonymous said...

it very helpful to me

Anonymous said...

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.

Unknown said...

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

Anonymous said...

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

Vicky said...

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

Unknown said...

Hi suresh,

The above functionality without using fadeout, and loading the images until the page is loading.?

Thanks and Regrds,
Elangovan.S

Anonymous said...

its working but what i want is this image should be displayed only until the database results are retrieved

Anonymous said...

its working but what i want is this image should be displayed only until the database results are retrieved

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.