Question

如果您在他们的网站上查看Apple的Mac页面。 http://www.apple.com/mac/ 当页面加载时，它们的“主体”在中心显示图像。页面完全加载后，其内容会淡入。如果您使用Chrome或Safari并打开元素检查器，您将看到他们的正文在加载页面时获得class="loaded revealed"。这会触发内容淡入。如果删除类，内容将淡出。

我正在为我的网站寻找类似的东西。我不希望整个内容不显示，我仍然想显示页眉和页脚。所以基本上我希望div#content_area在文档准备就绪时向下滑动...唯一的问题是，他们的身体不使用任何类型的display:none;。他们对此更加小心，因为如果JS文件失败，内容仍会显示。

我该怎么做？他们这样做的方式必须是轻量级的，因为任何人都可以编写像

这样的东西

$(document).ready(function() {
    $('div#content_area').attr(class, loaded revealed);
});

我需要做的就是添加.slide()功能并隐藏内容，直到页面加载为止。

Answer 1

已经发现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作为背景图片，所以不需要加载。

非常棒的没有？

您必须将脚本放在<body>结束标记结束之前......

如何使页面预加载器类似于Apple的Mac页面

1 个答案: