用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

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