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

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

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

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

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

  1. welee says:

    其實我也想過這個,只是還無法完全掌握 div 的絕對定位,所以一直沒去用,無論如何,這篇先收藏,改天再好好研究,感謝!

  2. neekey says:

    用絕對定位還會有可能碰到瀏覽器解析度不同的情況還要特殊考慮。。麻煩死了

  3. Eclip says:

    不錯,準備運用到自己的網站上。

  4. Leeiio says:

    @welee 哈哈,其實css的絕對定位還是比較容易控制的如果要被絕對定位的那個對象是一個很大的容器顯示的話~
    @neekey 所以我的頁面是居左的…

  5. yinheli says:

    搜索引擎是不會載入js的說.這樣做只是在客戶端顯示這種效果.有意義嗎?
    還是用Shawn的方法,比較好.

  6. Leeiio says:

    @yinheli 對啊,就是因為搜索引擎對js的讀取不好,所以即使用js把內容拷貝到了上面,搜索引擎還是沒識別的,也就達到了無關內容不被收錄的目的。。shawn什麼方法?給個連接?我學習下

  7. yinheli says:

    @Leeiio
    他貌似沒有寫方法…..我想盜版來著…

  8. Leeiio says:

    @yinheli 我想他的實現原理應該和我的差不多的,最多就是實現的js的方法不一樣~

  9. ucax says:

    從笑傲人生那裡過來,留各足跡。 😀

  10. xiaorsz says:

    你博客搞的越來越有型了,呵呵!!
    我是用.html的方法實現的,其實差不多。meta信息沒有必要後面載入吧!!導航是有必要的。

  11. Leeiio says:

    @ucax 呵呵,謝謝惠顧~
    @xiaorsz 這個不是頭部的meta,是文章的發表時間啊分類之類的meta呵呵,我看shawn的單篇文章頁也是這樣的,你會發現文章發表時間那一行是最後加載的,.html是啥原理,賜教!

  12. xiaorsz says:

    噢,我錯了!!呵呵!
    $(‘#meta’).html($(‘#meta2’).html());
    meta2是真的,不顯示。meta是空的。這樣也行!!

  13. Leeiio says:

    @xiaorsz 恩,在文中添加你這種了~jquery的api文檔沒看仔細,方法還真多呵呵~

  14. NetPuter says:

    我還以為你有用 Gxxx 的那個米當你的 blog 的米,結果還是原來的嘛。
    這個方法很贊,比單純用 JS 方便好多好多。
    建議你代碼的那裡,
    比如
    <div id=”header”>啦啦啦</div>
    寫成具體的內容,不要啦啦啦,這樣容易懂些,尤其是小菜們~

  15. Leeiio says:

    @醉倚西風 恩,我自己也非常自戀這個域名。。
    @NetPuter 恩,下次寫教程我會寫得通俗點哈~

  16. ptubuntu says:

    你的blog越來越牛了.看了很多都不懂.因為都沒有寫程序這塊.所以看起來很暈.

  17. Leeiio says:

    @ptubuntu 可能我的程序可能都只寫了主題部分哈,現在已經補全了正常調用的代碼了~

  18. Jinwen says:

    最近在網站的標籤上用到絕對定位,所以也就記起你寫過一篇這樣的,現在才回過頭來看。寫得很好呢,不禁說句JQuery的強大。

  19. Leo.N says:

    用文中方法解決了個問題,感謝博主分享!

  20. Pingback: 利用jQuery改變網頁元素載入順序 - 不知所云 Leo.N's Blog

  21. bolo says:

    可以做成數據載入後,空框架才slideDown啊

  22. Leeiio says:

    @bolo
    呃,啥?我這裡沒有slideDown啊

  23. Pingback: 利用jQuery改變網頁元素載入順序 | 無名小站

  24. edikud says:

    這個我用上了。。。 ❗

    多謝!

  25. edikud says:

    $(‘meta’).html($(‘#metac’).html());這個
    較好啊! 😆

  26. Armgod says:

    學習了。
    不用擔心的,那些瀏覽器不載入JS的用戶完全可以無視之

  27. 肖純凱 says:

    你這樣不是最終的解決方法,控制線程才是解決方法!

Leave a Reply to yinheli Cancel reply

Your email address will not be published. Required fields are marked *