如何加載的漂亮和流暢的網頁，因爲它可以讓

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