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

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

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

我该如何做到这一点？他们这样做，他们必须是轻量级的，因为任何人都可以写类似

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

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

来源

2011-12-18 henryaaron

昨天我重新标记这个给你让你多一点关注;看起来不是很有帮助。我的答案可以接受@ user1090389？ – 2011-12-20 18:30:35

这不是我正在寻找的。我会继续努力，并会让你知道...... – henryaaron 2011-12-21 01:53:28

也许改变你的问题。使用Javascript，您提供了一个解决方案。你特别寻求一个非黑客无JS的答案，以平滑降级脚本，而且没有。 – 2011-12-21 02:02:08

人已经发现，苹果有它的所有元素不透明度设置为0，而且对身体负荷，它添加类的身体和使用这样的

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

一些基本的CSS这里是我的版本，http://jsfiddle.net/dqUaX/1/

有什么了不起，它是：

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

很好很好不？

你必须把脚本<body>结束标记结束前...

来源

2011-12-30 05:24:01 henryaaron

恭喜。尽管如此，你仍然在使用JavaScript，并且Opacity完成了与“display：none”相同的功能。好奇......你能解释一下＃3吗？ – 2012-01-03 00:38:18

IE6和7无法渲染那么长的数据URI ......就像我在我的问题中所说的那样，一点JavaScript是好的。 – henryaaron 2012-01-03 14:59:06

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

在CSS中使用z-index属性来保持图像高于其他图像。

你做什么然后是使IMG display:none;属性，然后当他们的网页正在加载，你可以打开它与jQuery ...所以用JS占位符显示和坐在上面...没有JS，图像占位符是不可见的，并且用户只是在加载时看到内容DIV。

这有道理吗？

来源

2011-12-18 04:16:18

我仍然不明白内容将如何隐藏，即使图像是在它的顶部？ – henryaaron 2011-12-18 04:17:34

确保叠加照片的块容器不透明，并在顶部放置更大的z-index ...您可以使用jQuery通过抓取页面的背景颜色来动态设置背景颜色CSS属性，以使其匹配并且看起来毫无用处。 – 2011-12-18 04:22:24

只是为了重申，重点是如果你想内容正确显示没有JS，离开它应该在哪里......没有滑动，没有负边距，没有隐形或显示：无......只是为了使一个不透明的覆盖如果用户启用了JS，并在页面加载完成时将其滑开，最终结果是相同的，因为它看起来像您的内容刚刚到达。 :) – 2011-12-18 04:24:52

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

回答

相关问题