Page Loading Effects with jQuery
Written on
November 29, 2008 at 4:03 am by
mkyong
JQuery is really a powerful and handy javascript library. Page / content loading effect is very easy to implement in jQuery. Here i show some simple tips 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 it --> </div>
2) Create jQuery fadeIn effect when document is ready to display
$(document).ready(function(){
$(document).ready(function () {
$('#page_effect').fadeIn(2000);
});
});P.S fadeIn is the jQuery library build in functions
DEMO here.
Here is the complete jQuery code to implement 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(){ $(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>


Makes my Firefox crash…
how’s this work for the NOSCRIPTers?
do not think it is possible to achieve with current technology
I mean how does it fall back if java script is turned off in the user browser?
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.
So simple, but so helpful!
Thanks
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 ?
This demo is working fine in my IE8, the effect is exactly same with Firefox. Mind to share your code wit me?
Lovely. Just what I’m looking for. Thanks much.
nice work! it work for me!!!
Nice…!
Thanks.. very nice a tutorial..
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….
thanks, it’s good to know helpful to others
Thanks for this but I have one question, is it possible to load un html web page in a div with jquery ?
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
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.
Hi im fresher to webdev..gide me how to add dis effect to my pages…
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.
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..
good to know this work for you.
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?