载入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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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入门教程 精简版
2009/12/13 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Node.js 回调函数实例详解
2017/07/06 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python绘制简单折线图代码示例
2017/12/19 Python
tensorflow更改变量的值实例
2018/07/30 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
英文求职信结束语大全
2013/10/26 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
医院保洁服务方案
2014/06/11 职场文书
校园文化标语
2014/06/18 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL