载入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 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
理解javascript回调函数
Dec 28 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
javascript学习之json入门
Dec 22 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php自动获取目录下的模板的代码
2010/08/08 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
laravel5.6实现数值转换
2019/10/23 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Django中Model的使用方法教程
2018/03/07 Python
pandas中去除指定字符的实例
2018/05/18 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python对象与json相互转换的方法
2019/05/07 Python
利用python汇总统计多张Excel
2020/09/22 Python
当当网软件测试笔试题
2015/11/24 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书