載入jQuery庫的最佳方法詳細說明及實現代碼
2024-05-06 14:20:14
供稿：網友
由于目前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>
