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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Lisa @ Hochzeit & Trauung
Guest
Lisa @ Hochzeit & Trauung

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
Guest
MrTallOaks

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;
}

win
Guest
win

Thank you a lots i find this in along time.

Adam
Guest
Adam

Thank you very much, very snazzy!

Kevin
Guest
Kevin

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
Guest
Pawan Balapure
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… Read more »
trackback
Web Page animation on load – JQuery links « dotnetsilverlightblog
Ganesh
Guest
Ganesh

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
Guest
Starkbook

Its too useful for webdesigner… keep it up sir

microsilic
Guest
microsilic

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
Guest
Adam Gardiner

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
Guest
Ganesh

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
Guest
Adam Gardiner

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
Guest
Adam Gardiner

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
Guest
Jason

Never mind, I see how. Thank you!

Jason
Guest
Jason

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

chrissa
Guest
chrissa

very good, excellent! very useful

Joseph Beucke
Guest
Joseph Beucke

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
Guest
Martin

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

Thanks in advance!

Bob
Guest
Bob

where do you put it?

co2 effects
Guest
co2 effects

Thank you for your guide.

Thomas Jeffrey
Guest
Thomas Jeffrey

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
Guest
carlos

Thanks for this, my site looks great.

Yvonne
Guest
Yvonne

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
Guest
Marcos

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

Jayendra kumar
Guest
Jayendra kumar

HI,

Thanks to share nice article.

danny
Guest
danny

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

brandon
Guest
brandon

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

Anil
Guest
Anil

Thanks a lot, good one!!

trackback
12 Brand New jQuery techniques

[…] Page Loading Effects with jQuery In this short and easy to follow tutorial you will learn how to implement a nice fade in page […]

Passing
Guest
Passing

Thank you for the script.

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