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

Question

我想在我的项目中模仿苹果的一种页面行为（最好在 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。他们的网页可以免费下载该库以及文档。

Answer 2

您可以使用 jquery 并按照您想要的顺序淡入每个元素，并在其回调中淡入下一个元素。

http://jsfiddle.net/lucuma/Pd7We/

$('#nav').fadeIn(500,function() {
    $('#main').fadeIn(1000,function() {
       $('#footer').fadeIn(1000);     
    });
});​

Answer 3

像这样的东西怎么样：

jQuery(function ($) {
    $('.loading').show();
    $('.main').hide();
});
$(document).on('load', function () {
    $('.main').fadeIn(500);
    $('.loading').hide();
});