载入 jQuery 库的最佳方法

发表于 2011年4月3日 下午4:50 由 Sivan | 74,608 人看过

在网站开发的项目中使用 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 条评论

  2. Mucid 说：
    2011年4月3日下午10:02

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

    回复
  4. IM路人 说：
    2011年4月4日下午7:41

    这个不错，双保险~~

    回复
  5. 雨衣 说：
    2011年4月5日上午10:14

    好有创意的方法 ~ 收藏了

    回复
  6. 深圳福田鲜花店 说：
    2011年4月5日下午4:57

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

    回复
  7. MOPVHS 说：
    2011年4月8日下午3:37

    第一次看到这方法~~

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

    还是本地算了...

    回复
  8. Fanr 说：
    2011年4月15日下午12:55

    放底部哪里呢？之前？

    回复
  9. WILDEN气动隔膜泵 说：
    2011年4月15日下午2:06

    等于是双保险，很好。

    回复

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

  11. 宁波停车棚 说：
    2011年4月18日上午9:33

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

    回复
  13. lovesv 说：
    2011年6月27日上午9:06

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

    回复
  14. 皇家元林 说：
    2011年6月29日下午4:42

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

    回复
  15. gregory 说：
    2011年7月18日上午3:01

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

    回复
  16. biao166 说：
    2011年7月29日下午3:06

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

    回复
  17. cutebt 说：
    2011年7月31日下午5:18

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

    回复

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

  19. 长春物流 说：
    2011年11月18日下午1:56

    很好的方法，值得学习

    回复
  20. 吉林网站推广 说：
    2011年11月26日下午4:58

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

    回复
  21. xilouqingzhu 说：
    2012年5月1日下午3:29

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

    回复
  22. 互联网战 说：
    2012年5月10日下午4:23

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

    回复
  23. James 说：
    2012年6月27日上午11:14

    你这个背景的效果好炫啊

    回复
  24. 花少 说：
    2012年8月26日下午1:58

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

    回复

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

  26. Zzway 说：
    2012年11月7日下午11:47

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

    回复
    • Sivan 说：
      2012年11月8日上午12:09

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

      回复
  27. Stupid ET 说：
    2013年10月12日上午10:22

    背景实在太Cool了

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

66 + = 75