载入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获取网页中的js、css、Flash等文件
Dec 20 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 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学习笔记之 函数声明(二)
2011/06/09 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中取整的几种方法小结
2017/01/06 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
人力资源主管职责范本
2014/03/05 职场文书
食品安全责任书
2014/04/15 职场文书
走进敬老院活动总结
2014/07/10 职场文书
保密工作目标责任书
2014/07/28 职场文书
自我工作评价范文
2015/03/06 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python list列表删除元素的4种方法
2021/11/01 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技