问题
If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.
回答1:
Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?
回答2:
Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
- Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
- I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
- Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...
来源：https://stackoverflow.com/questions/8549743/how-to-make-a-page-preloader-similar-to-apples-mac-page