载入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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
一个背景云变换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 在线导入mysql大数据程序
2015/06/11 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
对于Python的框架中一些会话程序的管理
2015/04/20 Python
老生常谈python中的重载
2018/11/11 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
毕业生求职的求职信
2013/12/05 职场文书
美术社团活动总结
2014/06/27 职场文书
云台山导游词
2015/02/03 职场文书
民事上诉状范文
2015/05/22 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书