用jQuery控制網頁內容的加載順序

早前，在 5key 的博客上看到了一篇關於頁面頭部最後加載的文章，覺得這是一個非常有意義的做法，突然想起來 Shawn 的網站的頭部也是最後加載的，但是他似乎不是用的絕對定位的方法。

讓頁面頭部最後加載，說到底就是控制網頁內容的加載順序，好處 5key 已經在他的博文里提過了，但是我覺得好處不單單是他提到的那些，我再歸納一下吧。因為考慮到你的網頁可能會調用很多外部的 js 文件，主要來自與各大服務商的各大服務調用，比如 Feedsky 的訂閱數圖標，比如一款叫做鮮果推薦按鈕的 WP 插件(以前我的 blog 經常因為鮮果網站當機而導致加載卡在一個地方好久下不來)，又比如現在很流行的 Twitter 的 Api 輸出狀態信息以及 google friend connect 的掛件等等等諸如此類的服務，因為都是外部調用的，誰也無法保證服務商隨時當機的可能性。而同時我們又知道網頁默認的加載順序都是從上至下加載的。所以這時候通過 css 絕對定位那些外部調用的服務就顯得很有用處，把那些調用寫到網頁的底部去，這樣網頁加載的時候就不會卡住了，然後通過 css 的 position:absolute 絕對定位到網頁的顯示位置去，此法不錯，這時候 Evance 同學說話了，他認為 css 的絕對定位不應該被用作排版而該用來結構內容，我的觀點是絕對定位雖然定位很精確，但是如果你需要定位的那些東西都是很零散地分佈在網頁各處的話，我想這有得你忙的了。

當然改變網頁內容的加載順序的好處還沒有說完，他同時也可以 SEO 你的頁面，可能有些同學已經抱著這個目的在各自的網站實施了，對那些還沒明白過來的同學們我這里就說說吧。

因為你知道網頁的加載順序是從上往下的，而搜索引擎爬蟲爬取你的網頁的順序也是從上往下的。
所以讓一些不想出現在網頁頭部而遮擋了頁面正文的那些網頁內容我們統統可以移到頁面底部去，這樣爬蟲爬你網頁的時候最先獲取的才有可能是你的頁面正文內容。當然你可能要說我有在 head 里加入 description 啊，並且正文標題也是 H1 標記的，搜索引擎應該會先考慮這些吧，我只想說的是任何 SEO 的技巧都是拿來參考的，並不是那麼絕對的事情，除非你是某家搜索引擎公司的核心技術開發，隨時可以掌握搜索引擎的脾氣。

目前我的博客的做法是頂部導航以及頭部 banner 因為是一整個 DIV 包著的，並且在頁面頂部，所以很容易就用 css 絕對定位搞定了。至於文章頁面的標題下面的 meta 信息(發佈時間及分類等)，我是用另外一種方法實現的。那就是 jQuery。

標題未加載完全

標題加載完全

先看這個 Demo 框架，比較簡陋，主要說說 jQuery 實現的原理。

1
2
3
4
5
6
7
8

<div id="header">啦啦啦</div>
<div id="main">
	<div class="title"></div>  
	<div class="meta"></div> //這裡是先佈局定位好，然後jQuery會將放在footer的meta複製到class="meta"的div裡面 
        </div>  
<div id="footer">  
<div class="metac">我是文章的meta信息</div>  
</div>

jQuery 代碼：

1
2
3

<script type="text/javascript">
$('.metac').children().clone().appendTo('.meta');
</script>

當然也可以這樣寫:

1
2
3
4

<script type="text/javascript">
var clonemeta = $('.metac').html();
$(clonemeta).appendTo($('.meta'));
</script>

其實，還可以寫成這種簡潔的形式( xiaorsz提供 )

1
2
3

<script type="text/javascript">
$('meta').html($('#metac').html());
</script>

當然還需要一個 css，不然底部的 class=”metac” 的 Div 圖層也會顯示出來了。

1

.metac{ display:none }

實現原理:

正如那個簡陋的 demo 代碼所示，本來在 class=”title” 的下面有個 class=”meta” 的 div，但是他是空的，他的作用就是佔位佈局並且接收放在 id=”footer” 的 div 裡面的 class=”metac” 的 div 里的內容。當然 class=”metac” 的 div 是可以隨意擺放的，這樣就達到了改變網頁內容的加載及顯示順序的目的。

是不是很簡單。只消用 jQuery 的 clone() 函數就可以搞定這個效果。

此法的弊病就是加入瀏覽器不支持 js 或者禁用 js 的話那就玩兒完了。另外改變了網頁內容的加載順序之後，可能會造成頁面加載的時候給客戶帶來不美觀的感受，畢竟一塊一塊的空白給人的感覺肯定不會很好。

本人是 jQuery 初學者，代碼寫的如果不是最好的表達方式，請指正。