载入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 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
微信小程序实现文件预览
2020/10/22 Javascript
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
python为什么要安装到c盘
2020/07/20 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
金融专业大学生自我评价
2014/01/09 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年党总支工作总结
2014/12/18 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
python开发飞机大战游戏
2021/07/15 Python