jquery by 109 comments

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

Try 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>

109 comments on “Page Loading Effects with jQuery”

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

    Reply

  4. 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?

    Reply

  5. 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!

    Reply

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

    Reply

  10. 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 );
 
});
    Reply

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

      Reply

  11. 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 );

});
    Reply

  12. 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!!!

    Reply

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

    Reply

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

    Reply

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

    Thanks in advance!

    Reply

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

    Reply

  22. 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>
    Reply

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

    Reply

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

    Reply

  28. Thank you for the script.

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

    Reply

  31. 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…

    Reply 
  32.  $('#page_effect').hide().fadeIn(2000);

    and remove -> display:none

    Reply

  34. Yes, and what if Javascript is disable…

    You should use JS to hide AND show your page.

    Reply

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

    Anyone encountered this?

    Reply

  41. Script works fine with single html, but when I add it in template and create other pages in Dreamweaver, it doesnt. It just shows blank space, althought it’s working in *.dwt file.

    Reply

  43. it’s nice and you can show it in center of an element using

    $(“#report-pane”).ajaxStart(function() { var width = $(this).width(); var height = $(this).height(); $(“#report-loading”).css({ top: ((height / 2) – 25), left: ((width / 2) – 50) }).fadeIn(200); // fast fade in of 200 mili-seconds }).ajaxStop(function() { $(“#report-loading”, this).fadeOut(1000); // slow fade out of 1 second });

    thank you

    Reply

  46. Good trick.
    But I more interested to use a jQuery plugin, such page pre-loader. But I never find a jQuery plugin to display percentage of page load of web data, same as gmail loader.

    Reply

  50. Great effect. love the look of it.

    Is there a way to make it preload the images. if I hit ctrl+F5 then the fade in doesn’t work as it loads the images first.

    If i then refresh with a simple F5 then the fade in effect works.

    If you want to check out what I mean go to http://pumasocial.co.za/

    Thanks in advance for any help you can give me.

    Regards

    Reply

  52. Very nice. But wouldn’t the following be preferable?

    $(document).ready(function() {
    $('body').hide().fadeIn(2000);
    });

    Advantages: no need for an extra tag; and works if JavaScript is disabled as our container element isn’t hidden via CSS.

    Reply

    2. that’s awesome! but is there a way to avoid the page flash loading right before it hides and fades in?

      Reply

  53. I like the script. Works perfectly. But I need to figure out a way to show the page if someone doesn’t have javascript turned on. I have not been able to figure out a way to continue without the function if the user has javascript turned off. Please Help. Thanks.

    Reply

  54. can any body help me in running a jquery code where in after a clicking ecah page on the menu bar the jquery code sholud run which will inturn run a insert query in php.

    plz help on my email
    [email protected]

    Reply

  55. Great and Simple instructions, its always interesting to read about what jQuery has to offer 🙂 Thank you 🙂

    Reply

  56. just what I’m looking for!

    Thank you sir 🙂

    Reply

  57. I have used this to phase in an image (gif) and it works perfectly.

    However, it does not work if I use it on an SWF file. Pehaps that is not possible or I am missing something ?

    In any case, thanks very much for this – the technique and the time taken to explain it.

    James

    Reply

    1. Sorry, i’m not familiar with SWF, hope someone can answer it, may be you can post your question in stackoverflow.com

      Reply

  58. There is some problem, if you have more DIV tags included and some of them are positioned “absolute” (in CCS declaration). In FF and Google Chrome is everything correct, but in IE 6/7/8 fade effect doesn’t work. Has anyone some idea how to fix it ?

    Reply

  60. Is there a way to make it like an array? Make modules load in an order 1,2,3,4,5,6… ?

    Thank you so much for this script!

    Reply

    1. The idea will be wrap your content in order, and assign an order ID for each, then load it one by one with the timeout function.

      Reply

      1. this is what I came up with, it calls individual tags:

        $(function() { 
   var $sequence = $('h1,p,ul,ol,li,h3,span,a').hide(), div = 0; 
   (function(){ 
       $($sequence[div++]).fadeIn('fast', arguments.callee); 
   })(); 
});

        The alternate is this, it calls only items with the “crisco” class:

        $(function() { 
   var $sequence = $('[class$=crisco]').hide(), div = 0; 
   (function(){ 
       $($sequence[div++]).fadeIn('slow', arguments.callee); 
   })(); 
});

        This is only for images with the “crisco” class:

        $(function() { 
   var $sequence = $('img[class$=crisco]').hide(), div = 0; 
   (function(){ 
       $($sequence[div++]).fadeIn('slow', arguments.callee); 
   })(); 
});

        Demo by clicking my name above

        Reply

        2. Is there a way to apply it to several divs in one page? So maybe a class rather than an ID?..

          I tried Tim’s suggestion. But I’d prefer something that fades in all together, rather than sequenced, but able to apply it to many divs in one page.

          Thanks very much.

          Reply

  62. Hello … Nice job!

    But .. I have problems in Safari (4.0.5)

    Some of my content becomes invisible after the page is opened.
    When I resize my browser window – it works fine!?!

    What is the problem – and it can be solved?

    Reply

    1. Send me email with the the following information : URL, print screen, steps of simulation.

      Reply

  63. Nice one, but not the one i was looking for. Also I would suggest to make display none with inline scripting just under that div, so that no-script will gracefully degrade your feature,there is no prob with $(‘body’).fadeOut(2000), also display:none can prevent page from loading some images, visibility hidden can help, ju]t comments 🙂 , keep rockin dude……

    Reply

  65. Hi there,
    I have not implemented this code yet but would the fade in only perform when the entire page is loaded?
    I have a webpage using an large BG images.
    thanks
    D

    Reply

  66. I think that wrapping this function inside the same function is redundant

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

    This should do the same thing.

    Reply

  67. Hi, I implement this exactly like you showed, but in Safari, my text fades in and then disappears. Any idea what’s wrong?

    Reply

  68. I am looking for the similar effect for scrolling of page same like mashable. Can you help me with that? I did try it using the jquery plugin but it started throwing blank page however I can see that all the content are loading well.

    Reply

  69. I am looking for the similar effect for scrolling of page same like mashable. Can you help me with that? I did try it using the jquery plugin but it started throwing blank page however I can see that all the content are loading well.

    Reply

        1. google it “how to check if javascript disable”. If the javascript is disable, it will still display the whole content directly with no fade in effect appear.

          Reply

          1. No it won’t!!! This is AWFUL coding – if the user has javascript disabled, the inline style declaration of “display: none;” will still be there.

            There are loads of ways to do this, but you’ve chosen the worst possible method to implement it.

  73. Hello,

    i have a problem in ie 7/8 ! The fading text transform and images too! It’s not nice. Do you have a fix for this problem ?

    Reply

    1. This demo is working fine in my IE8, the effect is exactly same with Firefox. Mind to share your code wit me?

      Reply

  78. Mkyong….
    Thanks for this tutorial…
    very-very help me on my application event my application using master page…

    its realy working on me…
    thanks a lot dude…

    cheersss….

    Reply

  80. i am in secondary school and i havent learnt how to do stuff that advanced but i am realy intrested in it, i tried to do it but it dont seam to be working can you write a step by step instruction on how to make it work
    thanks

    Reply

    1. 1) download the jquery library (jquery.js)

      2) Create a html file, copy and paste the html code above

      Note: src is your downloaded jquery file location

      3) Save the file as html file and open it with your favor browser.

      Reply

  81. Hi im fresher to webdev..gide me how to add dis effect to my pages…

    Reply

  82. You should append the html elements for the loading screen with JS so that users on devices that do not support JS/CSS won’t get the loading elements.

    Reply

  83. opppsss.. sorry i just tried the script and it’s awesome.. thank you very much… 🙂 love it.. will use this for my next web/blog project.. 🙂

    Reply

  84. thank you for this script, this is what i’m looking for..

    But with 1 question:

    can i add this script inside my first page, there’s a lot of images inside my web, and i was thinking about how long it’ll load my page?

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *