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. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
90 Comment threads
25 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
86 Comment authors
MrTallOakswinAdamKevinPawan Balapure Recent comment authors
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

win
Guest
win

Thank you a lots i find this in along time.

eshanne
Guest
eshanne

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?

eshanne
Guest
eshanne

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

BAC
Guest
BAC

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.

Karthikeyan
Guest
Karthikeyan

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

ALEX
Guest
ALEX

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

Sun Location
Guest
Sun Location

Thanks for this but I have one question, is it possible to load un html web page in a div with jquery ?

kiemieuk
Guest
kiemieuk

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

fatih de?irmenci
Guest
fatih de?irmenci

Thanks.. very nice a tutorial..

kostas
Guest
kostas

Nice…!

kal
Guest
kal

nice work! it work for me!!!

andrew
Guest
andrew

Lovely. Just what I’m looking for. Thanks much.

Phil
Guest
Phil

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 ?

Sylas
Guest
Sylas

So simple, but so helpful!

Thanks

Dallas Peters
Guest
Dallas Peters

how’s this work for the NOSCRIPTers?

Nem
Guest
Nem

Makes my Firefox crash…

Genius geeks
Guest
Genius geeks

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.

kery
Guest
kery

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.

David
Guest
David

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

Adardesign
Guest
Adardesign

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.

Dancer
Guest
Dancer

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

Danish
Guest
Danish

nice.. tThanks for this

sabithpocker
Guest
sabithpocker

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

Michael
Guest
Michael

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?

????????? ??????????? ???????????
Guest
????????? ??????????? ???????????

i have problem to ie6…

trackback
jQuery fadein animation | Webmaster Forum Archive

[…] is http://www.mkyong.com/jquery/page-lo…s-with-jquery/ .. But this working at the page load..But i want this at the page unload & reverse order of […]

Tim
Guest
Tim

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!

Rolande Benestad
Guest
Rolande Benestad

cool, this is a informative post. i will definitely tweet this

trackback
Introduction to Page Loading | Page Loading Guidelines & Toolbox

[…] 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. Heres a example to make your… […]