载入jQuery库的最佳方法详细说明及实现代码


Posted in Javascript onDecember 28, 2012

由于目前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>
Javascript 相关文章推荐
javascript使用appendChild追加节点实例
Jan 12 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
javascript 实现map集合
Apr 03 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 #Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 #Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 #Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 #Javascript
JS声明变量背后的编译原理剖析
Dec 28 #Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 #Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 #Javascript
You might like
PHP数字格式化
2006/12/06 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
详解php实现页面静态化原理
2017/06/21 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
np.random.seed() 的使用详解
2020/01/14 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
上班看电影检讨书
2014/02/12 职场文书
学习决心书
2014/03/11 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
捐助倡议书范文
2014/04/15 职场文书
行政监察建议书
2014/05/19 职场文书
小学重阳节活动总结
2015/03/24 职场文书
python运算符之与用户交互
2022/04/13 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技