I want to create an effect in jquery that waits until every element of my page is done loading before anything is displayed. The same effect is done here.
As you can see, when you load or refresh the page, the background color appears and when everything is finished loading, jquery fades it in. My website is: http://www.vitaminjdesign.com
Any ideas on how to do this?
Put this into your CSS file (or directly in the body tag):
body {
display: none;
}
And the JS has to be (in head or body):
<script type="text/javascript">
$(window).load(function() {
$('body').fadeIn()
})
</script>
The function gets executed when the whole content of the document is loaded.
The best way to do this (which is, incidentally, the same method the Zaum website uses) is to create a div that covers the entire visible canvas and fade that OUT once the page fully loads. Here's the code:
#mask {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:red;
z-index:99;
}
And the HTML:
<HTML>
<HEAD>
<TITLE>Mask Example</TITLE>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<SCRIPT type="text/javascript">
$(window).load(function () {
$('#mask').fadeOut('slow');
});
</SCRIPT>
</HEAD>
<BODY>
<P>Some text goes here</P>
<IMG src="http://spaceflight.nasa.gov/gallery/images/shuttle/sts-119/hires/s119e008352.jpg" />
<P>And moar text!!</P>
<DIV id="mask"></DIV>
</BODY>
</HTML>
Messing with body opacity is generally considered bad practice and may not be fully supported on some browsers.