如何使页面预加载器类似于Apple的Mac页面 [英] How to make a page preloader similar to Apple's Mac page
问题描述
如果您在其网站上查看Apple的Mac页面. http://www.apple.com/mac/
页面加载时，他们的正文"在中间显示图像.页面完全加载后，它们的内容会淡入.如果您使用Chrome或Safari并打开Element Inspector，则将看到页面加载时它们的主体得到class="loaded revealed".这将触发内容淡入.如果删除这些类，则内容将淡出.
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.
我正在为我的网站寻找与此类似的内容.我不想整个内容都不会显示，但我仍然想显示页眉和页脚.因此，基本上，我希望div#content_area滑下准备就绪的文档……唯一的问题是，他们的身体不使用任何类型的display:none;.他们对此更加谨慎，因为如果JS文件失败，内容仍然会显示.
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);
});
我要做的就是添加.slide()函数并隐藏内容，直到页面加载为止.
All I need to do is add the .slide() function and hide the content until the page loads.
推荐答案
我们发现Apple的所有元素的不透明度都设置为0.并且在正文加载时，它将类添加到正文并使用一些基本的CSS，例如这个
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.;
}
这是我的版本， http://jsfiddle.net/dqUaX/1/
最棒的是:
- 不透明度被视为CSS3属性，因此，如果浏览器过时，内容将不会隐藏.
- 我实际上是使用jQuery将不透明度设置为0，因此即使用户使用的是css3浏览器，但禁用了JavaScript，内容仍会显示.
- 由于您需要CSS3才能隐藏div，因此我在背景图片中使用了巨大的DATA URI，因此不必加载.
非常棒吗?
您必须将脚本放在<body>结束标记的末尾...
You must put the script before the end of the <body> closing tag...
这篇关于如何使页面预加载器类似于Apple的Mac页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
