如何加载的漂亮和流畅的网页，因为它可以让

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。他们的网页可免费下载图书馆以及文档。

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(); 
});