用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 肖纯凯 Cancel reply

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