载入 jQuery 库的最佳方法

在网站开发的项目中使用 Google CDN 的 jQuery 库虽然加载速度很快,但调用本地服务器的库才可以确保万无一失。而使用 WordPress 内置 jQuery 库的话,其末尾防止 JS 库冲突而加入的 jQuery.noConflict() 使得主题中所有 jQuery 代码都要做一些小修改,更可能导致一些插件效果失效。Paul Irish 在 HTML5 Boilerplate 中使用的方法我认为非常不错,分享给大家。

使用方法

使用下面的代码可以在 Google CDN 库获取失败时载入本地 jQuery 库:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js"><\/script>')</script>

在WordPress主题中使用的方法为:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery.min.js"><\/script>')</script>

注意事项

  1. 因为开头提到的原因,所以建议下载一份 jQuery 官方的 min 库 放到 WordPress 当前使用的主题目录下调用,不要使用 wp-includes 里面的库。
  2. Google CDN 库的地址采用了协议相对路径,它可以很好的解决 https 引起的一些问题,具体可以看 Paul Irish 的介绍,当然你依旧可以使用带「http:」的路径。
  3. 许多网站都采用 Google CDN 提供的 jQuery 库,使用它可以得到出色的缓存效果。
  4. 把 jQuery 代码统统放到页面底部可以提高载入速度。
  5. 使用 HTML5 重构的页面可省略掉 type="text/javascript"

使用SAE开发者资源

由于 Google 服务在国内缺乏稳定性,为了稳妥,使用 SAE 的开发者资源是个省流量又提高速度的好方法。SAE 为新浪为其应用提供的开发者资源,其中就有 jQuery 库。使用的话非常简单,只要到 SAE 开发者中心 找到合适的地址并替换掉上面代码的 Google CDN 地址即可。例如:

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js"><\/script>')</script>

2011.05.25:由于目前 Google 的不稳定,而国内没有好的同类服务,故这已不是最优方案。当然,你把 Google 库路径换成国内稳定且快速的路径(如果存在),依然可以受用此方法带来的各种好处。
2011.06.23:根据 LOO2K 提醒,更新了 SAE 方案。

此条目发表在 前端开发 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。

载入 jQuery 库的最佳方法》有 33 条评论

  1. gsid 说:

    MARK

  2. Mucid 说:

    下了挂在自己服务器,用google的会扰乱https

  3. Louis Han 说:

    高墙误我啊

  4. IM路人 说:

    这个不错,双保险~~

  5. 雨衣 说:

    好有创意的方法 ~ 收藏了

  6. 深圳福田鲜花店 说:

    这种方法不错哦,简单实用

  7. MOPVHS 说:

    第一次看到这方法~~

    这样只能在无法连接Google CDN库时候奏效,没办法解决Google CDN库载入缓慢...

    还是本地算了...

  8. Fanr 说:

    放底部哪里呢?之前?

  9. WILDEN气动隔膜泵 说:

    等于是双保险,很好。

  10. Pingback 引用通告: 载入 jQuery 库的最佳方法 - 好记性不及烂笔头

  11. 宁波停车棚 说:

    这个方法真的很好,呵呵,谢谢博主了哈。

  12. LOO2K 说:

    国内的可以考虑用SAE的开发资源
    http://sae.sina.com.cn/?m=devcenter&catId=147

  13. lovesv 说:

    这个方法真的也挺不错,呵呵,谢谢了。吸收。

  14. 皇家元林 说:

    真不知道怎么弄好。。google确实好慢,所以我改用微软的。。
    国外的主机用sina这个,速度有影响吗?

    • Sivan 说:

      用新浪的这个,只要访客在国内速度就会很快了。不过国外访客也不会慢很多,新浪有向国外的CDN加速。

  15. gregory 说:

    学习到了,感谢更新SAE的方法

  16. biao166 说:

    SAE的应该可以慢慢替换google的呢

  17. cutebt 说:

    这个很有必要。。国内的太慢。。

  18. Pingback 引用通告: 实现自己的滑动效果文章归档页面,你也可以 | 奔跑的博客 | ELEC-Bench

  19. 长春物流 说:

    很好的方法,值得学习

  20. 吉林网站推广 说:

    这个方法真的很不错,谢博主分享

  21. xilouqingzhu 说:

    两边的涂鸦好强悍呀。震惊了

  22. 互联网战 说:

    您的博客拉到最下方的时候居然可以画画,太有意思了

  23. James 说:

    你这个背景的效果好炫啊

  24. 花少 说:

    你的2边那个鼠标特效是怎么做的啊?

  25. Pingback 引用通告: 载入jQuery库的最佳方法 | Sivan’s Blog | LADYCHEN.COM

  26. Zzway 说:

    把jQuery代码统统放到页面底部可以提高载入速度。
    --------------------------------------
    请教一下,这是为什么?

    • Sivan 说:

      页面加载到 js 文件时会等到加载完毕后再继续下面的内容,放到页底可以防止阻塞,优先载入页面的其他内容。

  27. Stupid ET 说:

    背景实在太Cool了