载入jQuery库的最佳方法详细说明及实现代码
发布时间：2013-10-19 编辑：jiaochengji.com
网站开发的项目中使用Google CDN的jQuery库虽然加载速度很快,但调用本地服务器的库才可以确保万无一失,接下来介绍载入jQuery库的最佳方法,感兴趣的朋友可以研究下
由于目前Google的不稳定，而国内没有好的同类服务，故这已不是最优方案。当然，你把Google库路径换成国内稳定且快速的路径（如果存在），依然可以受用此方法带来的各种好处。即便如此，综合考虑的话，还是Google的最合适。
网站开发的项目中使用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.5.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js">\x3C/script>')</script>
在Wordpress主题中使用的方法为：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/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">\x3C/script>')</script>
注意事项
因为开头提到的原因，所以建议下载一份jQuery官方的Min库放到Wordpress当前使用的主题目录下调用，不要使用wp-includes里面的库。
Google CDN库的地址采用了协议相对路径，它可以很好的解决https引起的一些问题，具体可以看Paul Irish的介绍，当然你依旧可以使用带“http:”的路径。
许多网站都采用Google CDN提供的jQuery库，使用它可以得到出色的缓存效果。
把jQuery代码统统放到页面底部可以提高载入速度。
使用HTML5重构的页面可省略掉type=”text/javascript”。
使用SAE开发者资源
由于Google服务最近有些问题，为了稳妥，使用SAE的开发者资源是个省流量又提高速度的好方法。SAE为新浪为其应用提供的开发者资源，其中就有jQuery库。使用的话非常简单，只要到SAE开发者中心找到合适的地址并替换掉上面代码的Google CDN地址即可。例如：
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js">\x3C/script>')</script>
网站开发的项目中使用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.5.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js">\x3C/script>')</script>
在Wordpress主题中使用的方法为：
复制代码 代码如下:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/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">\x3C/script>')</script>
注意事项
因为开头提到的原因，所以建议下载一份jQuery官方的Min库放到Wordpress当前使用的主题目录下调用，不要使用wp-includes里面的库。
Google CDN库的地址采用了协议相对路径，它可以很好的解决https引起的一些问题，具体可以看Paul Irish的介绍，当然你依旧可以使用带“http:”的路径。
许多网站都采用Google CDN提供的jQuery库，使用它可以得到出色的缓存效果。
把jQuery代码统统放到页面底部可以提高载入速度。
使用HTML5重构的页面可省略掉type=”text/javascript”。
使用SAE开发者资源
由于Google服务最近有些问题，为了稳妥，使用SAE的开发者资源是个省流量又提高速度的好方法。SAE为新浪为其应用提供的开发者资源，其中就有jQuery库。使用的话非常简单，只要到SAE开发者中心找到合适的地址并替换掉上面代码的Google CDN地址即可。例如：
复制代码 代码如下:
<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="/js/libs/jquery.min.js">\x3C/script>')</script>
您可能感兴趣的文章：
载入jQuery库的最佳方法详细说明及实现代码
JQuery从头学起第一讲
关于jquery性能最佳实践的讨论,与求教
JQuery入门—JQuery程序的代码风格详细介绍
jquery 常用操作整理 基础入门篇
jQuery的运行机制和设计理念分析
比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
python自学用什么书
jquery入门必备的基本认识及实例(整理)
web开发人员学习jQuery的6大理由及jQuery的优势介绍
[关闭]