Jquery Fade when page content is loaded
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 refres开发者_如何学运维h 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?
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.
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.
加载中,请稍侯......
精彩评论