早前，在 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的用户完全可以无视之
你这样不是最终的解决方法，控制线程才是解决方法！