Main Tutorials

Page Loading Effects with jQuery

JQuery is really a powerful and handy JavaScript library. The page or content loading effect is very easy to implement in jQuery. Here’s a example to make your web page content display a fade in page loading effect. It will make your reader a shock impression. 🙂

The idea is simple ~

1. Create a div block with content hide

This div block is use to implement content fade in page loading effect.


<div id="page_effect" style="display:none;">
<!-- this content is hide, need jQuery to fade in -->
</div>

2. jQuery fadeIn effect

Create a jQuery fadeIn effect when document is ready to display


$(document).ready(function(){	
	$('#page_effect').fadeIn(2000);
});

P.S fadeIn() is the jQuery library build in function.

3. Demo

Complete jQuery codes to implement the fade in loading effect.


<html>
<head>
<title>JQuery Page Loading Effect</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
	
	$('#page_effect').fadeIn(2000);

});

</script>
<body>
 
<div id="page_effect" style="display:none;">

<h1>JQuery Page Loading Effect</h1>

    This is page loading effect with JQuery 1<BR>
    This is page loading effect with JQuery 2<BR>
    This is page loading effect with JQuery 3<BR>
    This is page loading effect with JQuery 4<BR>
    This is page loading effect with JQuery 5<BR>
    This is page loading effect with JQuery 6<BR>
    This is page loading effect with JQuery 7<BR>
    This is page loading effect with JQuery 8<BR>
    This is page loading effect with JQuery 9<BR>
    This is page loading effect with JQuery 10<BR>
    This is page loading effect with JQuery 11<BR>
    This is page loading effect with JQuery 12<BR>
    This is page loading effect with JQuery 13<BR>
    This is page loading effect with JQuery 14<BR>
</div>

</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
109 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
win
10 years ago

Thank you a lots i find this in along time.

Lisa @ Hochzeit & Trauung
11 years ago

sometimes the page is shown before the ready function is started. how can i execute javascript before the html divs are shown?

thank you

MrTallOaks
9 years ago

Hello,

I’m not sure if this is a good practice, but I think you can use a noscript tag to force the display of the container, in case javascript is disabled.

Something like this :

#page_effect[style]{
display: block !important;
}

Adam
11 years ago

Thank you very much, very snazzy!

Kevin
11 years ago

Wonderful effect, I love it. Thank you! I have a question – can I have separate elements coming in at different speeds? If so can you please advise how to do this?

Pawan Balapure
11 years ago

How to access parent jsp’s(the main jsp page) elements in the child jsp(the jsp page which is called from main jsp using object tag in html) (for IE8)?

  
$('#EcoOver').click(function (e) { 								
				$("#graphsDiv").html('<object id="EcoOverPage" type="text/html" style="width:100%;height:800px" data="/analytics-0.0.1/dashboard?pageId=1" ></object>')	 
 
 
				if(document.getElementById("loading") == null)
					{
						$("#graphsDiv").prepend("<div id='loading' >Please Wait...</div>");
					}
					else{
						$("#loading").show();
					} 
 
				e.preventDefault();
			});

And,in the dashboard.jsp(child jsp which is being called using object tag) page,I am doing ,

 $(document).ready(function() {
$(window.parent.document).find("#loading").hide(); });

This is working prefectly in chrome ,but not in IE8.When i tested it, it shows undefined for that div in dashboard page in IE8 after the dashboard page is rendered.And in chrome it’s showing correct value.

Please help.
Thanks!

Ganesh
11 years ago

How can we open a div in another aspx page after that page is loaded, but I am handling this in another aspx page? How can I achieve this? Please share me answer

Thanks
Ganesh

Starkbook
11 years ago

Its too useful for webdesigner… keep it up sir

microsilic
11 years ago

Thanks great work
I would like make a web site like http://fabirco.org but I don’t know how to make it

Adam Gardiner
11 years ago

Oh, I should have mentioned the last code with the delay I just posted was for having a Fade OUT, instead of a Fade IN as that is what I was using this script for.

If you still want to use this script as a Fade IN, the code would be as follows:

$(document).ready(function(){
 
	var t = setTimeout ( "$('#page_effect').fadeIn(1000)", 1500 );
 
});
Ganesh
11 years ago
Reply to  Adam Gardiner

How can we open a div in another aspx page after that page is loaded, but I am handling this in another aspx page? How can I achieve this? Please share me answer

Adam Gardiner
11 years ago

Nevermind, figured it out.

In case someone else was looking for the same thing, this code works:

$(document).ready(function(){
 
	var t = setTimeout ( "$('#page_effect').fadeOut(1000)", 1500 );

});
Adam Gardiner
11 years ago

Quick question, I am trying to get the fadeIn to delay 1 second before it starts.

Using the jquery delay function is not working. Can you possibly tell me why?

Here is the code I am using:

$(document).ready(function(){
 
	$('#page_effect').delay(1000).fadeIn(3000);
 
});

Thanks in advance, and great code BTW!!!

Jason
11 years ago

Never mind, I see how. Thank you!

Jason
11 years ago

Excellent! Is there a way to control the color of the fade in? It is white by default.

chrissa
11 years ago

very good, excellent! very useful

Joseph Beucke
11 years ago

I simply had to say thanks again. I do not know the things that I could possibly have accomplished in the absence of these information provided by you relating to such a field. It became an absolute hard dilemma in my position, but looking at your skilled strategy you solved that made me to jump for gladness. Extremely happy for your assistance and even hope that you comprehend what an amazing job you are always getting into training people via your web site. I know that you haven’t come across any of us.

Martin
11 years ago

I know this isn’t exactly related, but is there anyway to incorporate something this simple with Supersized.js?

Thanks in advance!

Bob
11 years ago

where do you put it?

co2 effects
12 years ago

Thank you for your guide.

Thomas Jeffrey
12 years ago

what do you mean, you just fadeIn a div after the page has finished loading and you call it loading effect? i thought you can do better than that to write a code that displays “waiting” whilst the page. you are a disappointment and disceiptful

carlos
12 years ago

Thanks for this, my site looks great.

Yvonne
12 years ago

If you wrap your page with display:none, your page will not load when visitors have javascript disabled.

Use jQuery to add display:none css property to the body… use the script below and no div container is needed, your page will have the nice loading effect when javascript is enable and will still display without javascript.

 
<script type="text/javascript">
    $(document).ready(function() {
            $("body").css("display", "none");
            $("body").fadeIn(2000);
    });
</script>
Marcos
12 years ago

bueno y sencillo, gracias. (Google translated : good and simple, thanks.)

Jayendra kumar
12 years ago

HI,

Thanks to share nice article.

danny
12 years ago

Awesome, thanks allot. This really saved me some time figuring this out.

brandon
12 years ago

How do you do this with an image instead of a DIV element?

Anil
12 years ago

Thanks a lot, good one!!

Passing
12 years ago

Thank you for the script.

Note : the script has to be in the body, hasn’t it ?

sexshop
12 years ago

great tutorial thnx jQuery!

eldar
12 years ago

great tip, thanks