快捷導(dǎo)航

載入jQuery庫(kù)的最佳方法詳細(xì)說(shuō)明及實(shí)現(xiàn)代碼

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

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

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

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

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

復(fù)制代碼代碼如下:

<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主題中使用的方法為：

復(fù)制代碼代碼如下:

<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>

注意事項(xiàng)
因?yàn)殚_(kāi)頭提到的原因，所以建議下載一份jQuery官方的Min庫(kù)放到Wordpress當(dāng)前使用的主題目錄下調(diào)用，不要使用wp-includes里面的庫(kù)。

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

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

復(fù)制代碼代碼如下:

<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> 