载入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 animate 动画效果使用说明
Nov 04 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 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
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
详解Python字符串对象的实现
2015/12/24 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
numpy实现RNN原理实现
2021/03/02 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
国际商务专业学生个人的自我评价
2013/09/28 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
创业资金计划书
2014/02/06 职场文书
产品销售计划书
2014/05/04 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
运动会开幕式致辞
2015/07/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python