载入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通过RegExp实现客户端验证处理程序
May 07 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
js如何打印object对象
Oct 16 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
node.js操作mysql简单实例
May 25 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
vue3.0实现插件封装
Dec 14 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中使用Oracle数据库(6)
2006/10/09 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
opencv实现图像几何变换
2021/03/24 Python
运动会广播稿诗歌版
2014/09/12 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android