载入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 相关文章推荐
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
js实现随机抽奖
Mar 19 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 全角转半角实现代码
2010/05/16 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
使用console进行性能测试
2015/04/27 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
12步教你理解Python装饰器
2016/02/25 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
有趣的python小程序分享
2017/12/05 Python
flask 实现token机制的示例代码
2019/11/07 Python
会计专业毕业生自我评价
2013/09/25 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
《童趣》教学反思
2014/02/19 职场文书
质量保证书范本
2014/04/29 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js