载入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基本语法分析说明
Jun 15 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
Element InputNumber计数器的使用方法
Jul 27 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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递归函数返回值使用方法
2013/02/18 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
详解python配置虚拟环境
2019/04/08 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
3种python调用其他脚本的方法
2020/01/06 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
营销与策划专业求职信
2014/06/20 职场文书
动物科学专业求职信
2014/07/27 职场文书
生日赠语
2015/06/23 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL