如果您查看 Apple 网站上的 Mac 页面。 http://www.apple.com/mac/
页面加载时，它们的“主体”在中心显示图像。页面完全加载后，它们的内容会淡入。如果您使用 Chrome 或 Safari 并打开 Element Inspector，您会看到它们的正文在页面加载时获得 class="loaded displayed" 。这会触发内容淡入。如果删除类，内容就会淡出。
我正在为我的网站寻找与此类似的内容。我不希望整个内容不显示，我仍然想显示页眉和页脚。所以基本上我希望 div#content_area 在文档准备好时向下滑动...唯一的问题是，他们不使用任何类型的 display:none; body 。他们对此更加小心，因为如果 JS 文件失败，内容仍然会显示。
我怎样才能做到这一点？他们的做法必须是轻量级的，因为任何人都可以写类似的东西
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
我需要做的就是添加 .slide() 函数并隐藏内容，直到页面加载。
最佳答案
在您想要的位置设置您的内容 DIV...在顶部设置您想要作为占位符的图像(如果可能/必要，使用绝对值)。
在 CSS 中，使用 z-index 属性将图像保持在其他图像之上。
然后你要做的就是使 IMG 成为一个 display:none; 属性，然后在加载页面时你可以使用 jQuery 将其打开......因此使用 JS 占位符会显示并放置上面...如果没有 JS，图像占位符是不可见的，用户只需在加载时看到内容 DIV。
这有道理吗？
关于javascript - 如何制作类似于苹果Mac页面的页面预加载器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8549743/