载入jQuery库的最佳方法详细说明及实现代码

由于目前Google的不稳定，而国内没有好的同类服务，故这已不是最优方案。当然，你把Google库路径换成国内稳定且快速的路径（如果存在），依然可以受用此方法带来的各种好处。即便如此，综合考虑的话，还是Google的最合适。

网站开发的项目中使用Google CDN的jQuery库虽然加载速度很快，但调用本地服务器的库才可以确保万无一失。而使用Wordpress内置jQuery库的话，其末尾防止JS库 冲突而加入的jQuery.noConflict()使得主题中所有jQuery代码都要做一些小修改，更可能导致一些插件效果失效。Paul Irish在HTML5 Boilerplate中使用的方法我认为非常不错，分享给大家。

使用方法
使用下面的代码可以在Google CDN库获取失败时载入本地jQuery库：


代码如下:

<script type="text/javascript" src="https://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="https://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="https://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>

赞 (0)

相关推荐

  • 载入jQuery库的最佳方法详细说明及实现代码

    由于目前Google的不稳定,而国内没有好的同类服务,故这已不是最优方案.当然,你把Google库路径换成国内稳定且快速的路径(如果存在),依然可以受用此方法带来的各种好处.即便如此,综合考虑的话,还是Google的最合适. 网站开发的项目中使用Google CDN的jQuery库虽然加载速度很快,但调用本地服务器的库才可以确保万无一失.而使用Wordpress内置jQuery库的话,其末尾防止JS库 冲突而加入的jQuery.noConflict()使得主题中所有jQuery代码都要做一些小修

  • JavaScript的jQuery库中ready方法的学习教程

    学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? onload 事件 最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为

  • jquery利用event.which方法获取键盘输入值的代码

    实例 显示按了哪个键: $("input").keydown(function(event){ $("div").html("Key: " + event.which); }); 亲自试一试 定义和用法 which 属性指示按了哪个键或按钮. 语法 event.which参数 描述 event 必需.规定要检查的事件.这个 event 参数来自事件绑定函数. jQuery丢弃了标准的 button 属性采用 which,这有点让人费解. whic

  • jquery库文件略庞大用纯js替换jquery的方法

    jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果 $('#layer') document.getElementById('layer') $('#layer span') var layer = document.getElementById('layer'); var span = layer.getElementsByTagName('span'); $('#inner').parent() document.getElementById(

  • jQuery中库的引用方法

    jQuery是一个轻量级的JavaScript库,里面包含所有的jQuery方法. 如果想要使用这些方法,那么必须首先引用这个库. 先看一段代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

  • Qt图形图像开发之曲线图表库QtChart编译安装详细方法与使用实例

    Qt曲线图表库QtChart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库QtChart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://gi

  • Qt图形图像开发之曲线图表库QChart编译安装详细方法与使用实例

    Qt曲线图表库Qt Chart简介 Qt的线性绘图控件有大名鼎鼎的Qwt,ChartDirector,小巧玲珑的QCustomPlot,当然还有自家的QtChart.长久以来QtChart在Qt家族里一直是收费的模块,只有商业版才可以使用,但Qt5.7之后将开放其权限,可参见:Qt 5.7 亮瞎眼的更新.下面将介绍如何安装QtChart并进行简单的绘图. Qt曲线图表库Qt Chart下载 这里用git下载QtChart,参考Qt Charts 5.7.0 安装教程 Git地址:https://

  • 动态加载jquery库的方法

    有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库.好处不用我说,节省带宽,提高访问速度,因为用户可能不会点击这个按钮,也就不需要 Jquery .那么如何动态加载 Jquery 库呢?一般可以用 Document.write 来打印出,也可以用 Ajax ,也可以用我下面的这种方式: 复制代码 代码如下: <!DOCTYPE html PUBLIC "

  • 在JavaScript的jQuery库中操作AJAX的方法讲解

    Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现:而Spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们:而Hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码.   前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进

  • jQuery中ajax - post() 方法实例详解

    jQuery中ajax - post() 方法实例详解

    在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

随机推荐