如何使页面预加载器类似于Apple的Mac页面
如果您在他们的网站上查看Apple的Mac页面。 http://www.apple.com/mac/他们的“正文”在页面加载时在中心显示图像。 页面完全加载后，其内容将淡入。如果您使用Chrome或Safari并打开元素检查器，您将看到他们的主体在class="loaded revealed"页面时获得class="loaded revealed"加载”。 这会触发内容淡入。如果删除类，内容将淡出。
我正在为我的网站寻找类似的东西。 我不希望整个内容都不显示，我仍然希望显示页眉和页脚。 所以基本上我希望div#content_area在文档准备就绪时向下滑动…唯一的问题是，它们不使用任何类型的display:none; 为了他们的身体。 他们对此更加小心，因为如果JS文件失败，内容仍会显示。
我该怎么做？ 他们这样做的方式必须是轻量级的，因为任何人都可以写出像
$(document).ready(function() { $('div#content_area').attr(class, loaded revealed); });
我需要做的就是添加.slide()函数并隐藏内容直到页面加载。
将您的DIV内容设置在您想要的位置…将您想要的图像设置为顶部的占位符（如果可能/必要，使用绝对值）。
在CSS中使用z-index属性将图像保持在另一个上面。
你做的是让IMG display:none; 属性，然后当他们页面加载时你可以用jQuery打开它…所以用JS占位符显示并坐在上面……没有JS，图像占位符是不可见的，用户只是看到内容DIV为它负载。
有道理？
已经发现Apple将其所有元素的不透明度设置为0.并且在体载上，它将类添加到正文并使用一些基本的CSS这样
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作为背景图像，所以它不需要加载。
太棒了没有？
您必须将脚本放在结束标记的末尾之前…