載入jQuery庫的最佳方法詳細說明及實現(xiàn)代碼

更新時間：2012年12月28日 17:42:27 作者：

網(wǎng)站開發(fā)的項目中使用Google CDN的jQuery庫雖然加載速度很快,但調用本地服務器的庫才可以確保萬無一失,接下來介紹載入jQuery庫的最佳方法,感興趣的朋友可以研究下

由于目前Google的不穩(wěn)定，而國內沒有好的同類服務，故這已不是最優(yōu)方案。當然，你把Google庫路徑換成國內穩(wěn)定且快速的路徑（如果存在），依然可以受用此方法帶來的各種好處。即便如此，綜合考慮的話，還是Google的最合適。

網(wǎng)站開發(fā)的項目中使用Google CDN的jQuery庫雖然加載速度很快，但調用本地服務器的庫才可以確保萬無一失。而使用Wordpress內置jQuery庫的話，其末尾防止JS庫沖突而加入的jQuery.noConflict()使得主題中所有jQuery代碼都要做一些小修改，更可能導致一些插件效果失效。Paul Irish在HTML5 Boilerplate中使用的方法我認為非常不錯，分享給大家。

使用方法
使用下面的代碼可以在Google CDN庫獲取失敗時載入本地jQuery庫：

復制代碼代碼如下:

<script type="text/javascript" src="http://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="http://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庫的地址采用了協(xié)議相對路徑，它可以很好的解決https引起的一些問題，具體可以看Paul Irish的介紹，當然你依舊可以使用帶“http:”的路徑。
許多網(wǎng)站都采用Google CDN提供的jQuery庫，使用它可以得到出色的緩存效果。
把jQuery代碼統(tǒng)統(tǒng)放到頁面底部可以提高載入速度。
使用HTML5重構的頁面可省略掉type=”text/javascript”。

使用SAE開發(fā)者資源
由于Google服務最近有些問題，為了穩(wěn)妥，使用SAE的開發(fā)者資源是個省流量又提高速度的好方法。SAE為新浪為其應用提供的開發(fā)者資源，其中就有jQuery庫。使用的話非常簡單，只要到SAE開發(fā)者中心找到合適的地址并替換掉上面代碼的Google CDN地址即可。例如：

復制代碼代碼如下:

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