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>
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • win

    Thank you a lots i find this in along time.

  • http://www.wherelionsroam.co.uk Adam

    Thank you very much, very snazzy!

  • http://[email protected] 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

    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) { 								
    				$(&quot;#graphsDiv&quot;).html('&lt;object id=&quot;EcoOverPage&quot; type=&quot;text/html&quot; style=&quot;width:100%;height:800px&quot; data=&quot;/analytics-0.0.1/dashboard?pageId=1&quot; &gt;&lt;/object&gt;')	 
     
     
    				if(document.getElementById(&quot;loading&quot;) == null)
    					{
    						$(&quot;#graphsDiv&quot;).prepend(&quot;&lt;div id='loading' &gt;Please Wait...&lt;/div&gt;&quot;);
    					}
    					else{
    						$(&quot;#loading&quot;).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(&quot;#loading&quot;).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!

  • Pingback: Web Page animation on load – JQuery links « dotnetsilverlightblog()

  • http://hochzeit-trauung.com 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

  • 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

  • http://www.starkbook.com Starkbook

    Its too useful for webdesigner… keep it up sir

  • http://fabirco.org/%D9%85%DB%8C%DA%A9%D8%B1%D9%88%D8%B3%DB%8C%D9%84%DB%8C%D8%B3 microsilic

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

  • http://itsnetservices.com 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 ( &quot;$('#page_effect').fadeIn(1000)&quot;, 1500 );
     
    });
    • 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

  • http://itsnetservices.com 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 ( &quot;$('#page_effect').fadeOut(1000)&quot;, 1500 );
     
    });
  • http://itsnetservices.com 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

    Never mind, I see how. Thank you!

  • Jason

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

  • http://www.elecnetsolar.gr chrissa

    very good, excellent! very useful

  • http://þÿ 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

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

    Thanks in advance!

  • Bob

    where do you put it?

  • http://www.afireworks.gr co2 effects

    Thank you for your guide.

  • http://trackhackers.removespywarereview.com/ 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

    • http://www.mkyong.com mkyong

      FadeIn is a loading effect, it’s not a advance technique but simple and nice.

  • carlos

    Thanks for this, my site looks great.

  • 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.

    &lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function() {
                $(&quot;body&quot;).css(&quot;display&quot;, &quot;none&quot;);
                $(&quot;body&quot;).fadeIn(2000);
        });
    &lt;/script&gt;
    • http://www.mkyong.com mkyong

      nice inputs and great suggestion, thanks Yvonne.

  • Marcos

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

  • http://www.drupalsource.blogspot.com Jayendra kumar

    HI,

    Thanks to share nice article.

  • http://www.comheroes.nl danny

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

  • brandon

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

  • Anil

    Thanks a lot, good one!!

  • Pingback: 12 Brand New jQuery techniques()

  • Passing

    Thank you for the script.

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

    • http://www.mkyong.com mkyong

      Recommended to put in the body.

  • http://www.adameve.gr sexshop

    great tutorial thnx jQuery!

  • http://webmastering.uz eldar

    great tip, thanks

  • http://manuelrocha.co/ Manuel

    I did something similar to my website but noticed the effect of loading does not run well when you have many images and other stuff in the page, also, as usual, the quality in IE sucks… at least the way I did it…

  • mc
     $('#page_effect').hide().fadeIn(2000);

    and remove -> display:none

  • http://www.pakhobook.com Chan Pak Ho

    how to get the loading images on it?

    • naser

      i have like you ?it’s may?

  • JF

    Yes, and what if Javascript is disable…

    You should use JS to hide AND show your page.

  • bob

    awesome

  • Audiology

    For some reason it does not work with Lightbox, other than that– it works great.

    Anyone encountered this?

  • http://inkers.in smijo

    Thank you… It was very easy to implement.

  • http://www.quali-x.de Wiyono

    Perfect…
    This great..
    Thank you so much…