载入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 相关文章推荐
22点关于jquery性能优化的建议
May 28 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
JS如何判断json是否为空
Jul 06 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
JavaScript实现简单图片切换
Apr 29 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实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
ReactNative列表ListView的用法
2017/08/02 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
django 发送手机验证码的示例代码
2018/04/25 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
大学生创业计划书的格式要求
2013/12/29 职场文书
教师产假请假条范文
2014/04/10 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL