载入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 以对象为索引的关联数组
May 19 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
小程序实现点击tab切换左右滑动
Nov 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
杏林同学录(二)
2006/10/09 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python实现抖音视频批量下载
2018/06/20 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
促销活动总结
2014/04/28 职场文书
和睦家庭事迹
2014/05/14 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
小学运动会加油稿
2015/07/22 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
zabbix配置nginx监控的实现
2022/05/25 Servers