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>
Thank you a lots i find this in along time.
sometimes the page is shown before the ready function is started. how can i execute javascript before the html divs are shown?
thank you
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;
}
Thank you very much, very snazzy!
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?
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)?
And,in the dashboard.jsp(child jsp which is being called using object tag) page,I am doing ,
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!
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
Its too useful for webdesigner… keep it up sir
Thanks great work
I would like make a web site like http://fabirco.org but I don’t know how to make it
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:
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
Nevermind, figured it out.
In case someone else was looking for the same thing, this code works:
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:
Thanks in advance, and great code BTW!!!
Never mind, I see how. Thank you!
Excellent! Is there a way to control the color of the fade in? It is white by default.
very good, excellent! very useful
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.
I know this isn’t exactly related, but is there anyway to incorporate something this simple with Supersized.js?
Thanks in advance!
where do you put it?
Thank you for your guide.
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
FadeIn is a loading effect, it’s not a advance technique but simple and nice.
Thanks for this, my site looks great.
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.
nice inputs and great suggestion, thanks Yvonne.
bueno y sencillo, gracias. (Google translated : good and simple, thanks.)
HI,
Thanks to share nice article.
Awesome, thanks allot. This really saved me some time figuring this out.
How do you do this with an image instead of a DIV element?
Thanks a lot, good one!!
Thank you for the script.
Note : the script has to be in the body, hasn’t it ?
Recommended to put in the body.
great tutorial thnx jQuery!
great tip, thanks