DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 載入jQuery庫的最佳方法詳細說明及實現代碼
載入jQuery庫的最佳方法詳細說明及實現代碼
編輯: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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved