jquery - 如何尽可能流畅地加载网页

Question

我想在我的元素中模仿一个 apple's pages行为(最好在 FF、Chrome、Safari 上查看):

1. 一开始页面除了标题是空的 - 但是页面的高度已经设置为加载所有内容时的最终高度因此浏览器滚动条不会改变。
2. 页面的元素(主横幅、中级横幅、最后的横幅、页脚等)以平滑的淡入方式从上到下一个接一个地出现。

这两件事使页面加载看起来绝对流畅和令人惊叹。

一般来说，我的页面是这样的:

<header></header>
<div id="content>
     <div id="mainImage"></div>
     <div id="gallery"></div>
     <div id="info"></div> 
</div>
<footer></footer>

我有一些猜测苹果是怎么做到的，但我不确定:

1. 虽然所有内容都在 opacity:0 中，但所有页面都已完全加载，只有在此之后，才有一个脚本可以使每个元素逐个出现。我认为这效率不高。
2. 所有页面都建立在对每个部分的 ajax 调用上:当它完成加载时，它就会出现。这也不合适，因为它们总是从上到下出现，而不是先出现。以及他们如何在开始时计算页面的高度。

我很高兴有想法，也很高兴有一种方法可以使代码更高效、更通用，而且代码易于使用。

有什么想法吗？

Answer 1

苹果网站使用scriptaculous .在他们的网页上可以免费下载库和文档。