早前，在 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 初學者，代碼寫的如果不是最好的表達方式，請指正。
其實我也想過這個，只是還無法完全掌握 div 的絕對定位，所以一直沒去用，無論如何，這篇先收藏，改天再好好研究，感謝！
用絕對定位還會有可能碰到瀏覽器解析度不同的情況還要特殊考慮。。麻煩死了
不錯，準備運用到自己的網站上。
@welee 哈哈，其實css的絕對定位還是比較容易控制的如果要被絕對定位的那個對象是一個很大的容器顯示的話~
@neekey 所以我的頁面是居左的…
搜索引擎是不會載入js的說.這樣做只是在客戶端顯示這種效果.有意義嗎?
還是用Shawn的方法,比較好.
@yinheli 對啊，就是因為搜索引擎對js的讀取不好，所以即使用js把內容拷貝到了上面，搜索引擎還是沒識別的，也就達到了無關內容不被收錄的目的。。shawn什麼方法？給個連接？我學習下
@Leeiio
他貌似沒有寫方法…..我想盜版來著…
@yinheli 我想他的實現原理應該和我的差不多的，最多就是實現的js的方法不一樣～
從笑傲人生那裡過來，留各足跡。 😀
你博客搞的越來越有型了，呵呵！！
我是用.html的方法實現的，其實差不多。meta信息沒有必要後面載入吧！！導航是有必要的。
@ucax 呵呵，謝謝惠顧～
@xiaorsz 這個不是頭部的meta，是文章的發表時間啊分類之類的meta呵呵，我看shawn的單篇文章頁也是這樣的，你會發現文章發表時間那一行是最後加載的，.html是啥原理，賜教!
噢，我錯了！！呵呵！
$(‘#meta’).html($(‘#meta2’).html());
meta2是真的，不顯示。meta是空的。這樣也行！！
@xiaorsz 恩，在文中添加你這種了～jquery的api文檔沒看仔細，方法還真多呵呵～
域名不錯哈
我還以為你有用 Gxxx 的那個米當你的 blog 的米，結果還是原來的嘛。
這個方法很贊，比單純用 JS 方便好多好多。
建議你代碼的那裡，
比如
<div id=”header”>啦啦啦</div>
寫成具體的內容，不要啦啦啦，這樣容易懂些，尤其是小菜們~
@醉倚西風 恩，我自己也非常自戀這個域名。。
@NetPuter 恩，下次寫教程我會寫得通俗點哈~
你的blog越來越牛了.看了很多都不懂.因為都沒有寫程序這塊.所以看起來很暈.
@ptubuntu 可能我的程序可能都只寫了主題部分哈，現在已經補全了正常調用的代碼了~
最近在網站的標籤上用到絕對定位，所以也就記起你寫過一篇這樣的，現在才回過頭來看。寫得很好呢，不禁說句JQuery的強大。
厲害啊
好專業 學習學習
用文中方法解決了個問題，感謝博主分享！
Pingback: 利用jQuery改變網頁元素載入順序 - 不知所云 Leo.N's Blog
可以做成數據載入後，空框架才slideDown啊
@bolo
呃，啥？我這裡沒有slideDown啊
Pingback: 利用jQuery改變網頁元素載入順序 | 無名小站
這個我用上了。。。 ❗
多謝！
$(‘meta’).html($(‘#metac’).html());這個
較好啊！ 😆
學習了。
不用擔心的，那些瀏覽器不載入JS的用戶完全可以無視之
你這樣不是最終的解決方法，控制線程才是解決方法！