载入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="//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>