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

Question

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

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

我怎样才能做到这一点？他们的做法必须是轻量级的，因为任何人都可以编写类似的内容。

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

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

Answer 1

在您想要的位置设置您的内容 DIV...在顶部设置您想要作为占位符的图像（如果可能/必要，则使用绝对）。

在 CSS 中，使用 z-index 属性将图像保持在其他图像之上。

然后你要做的就是使 IMG 成为一个 display:none; 属性，然后当页面加载时你可以使用 jQuery 打开它......所以使用 JS 占位符会显示并位于上面......如果没有 JS，图像占位符是不可见的，用户只能在加载时看到内容 DIV。

这有道理吗？

Answer 2

发现Apple将所有元素的不透明度设置为0。在主体加载上，它将类添加到主体并使用一些基本的CSS，如下所示这

div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}

是我的版本，http://jsfiddle.net/dqUaX/1/

它的优点是：

1. 不透明度被认为是 CSS3 属性，因此如果浏览器过时的内容不会隐藏。
2. 我实际上使用 jQuery 将不透明度设置为 0，这样即使用户有 css3 浏览器，但禁用了 JavaScript，内容仍然会显示。
3. 由于您需要 CSS3 来隐藏 div，因此我使用了一个巨大的 DATA URI 作为背景图像，因此无需加载。

非常棒不是吗？

您必须将脚本放在 结束标记的末尾之前...