嘗試在線加載CSS和JS，並且如果在本地加載失敗

Question

我有一個網頁要託管在同時支持Wi-Fi和3G的移動設備上。由於3G數據可能需要花費並且通常受到限制，因此我想盡量減少設備上傳的數據量。所以我基本上想要做的是以下幾點：

嘗試網上加載的jQuery腳本：

<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script> 

而且只有如果無法正確加載（例如，如果用戶沒有連接到互聯網，只是電話），從本地複製加載它：

<script type="text/javascript" src="js/jquery-copy.js"></script> 

這同樣適用於css文件。

我想過有一個<script id="loadable"></script>，然後使用$("#loadable").load("url");但顯然我依靠jquery首先加載，這是要最小化的文件。

Answer 1

<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script> 
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-copy.js"%3E%3C/script%3E'))</script> 

Answer 2

我編輯了答案。我認爲波紋管是最優雅的解決方案。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="path/to/your/jquery"><\/script>')</script> 

Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail

Answer 3

看看他們是如何做到這一點的HTML5 boilerplate.

如果你看一下在GitHub庫中的bottom of the index.html file，你會看到下面的...

<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script> 
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-copy.js"%3E%3C/script%3E'))</script> 

它是如何工作的？

• 首先，試圖搶CDN版本（谷歌的CDN網址 上面使用，當然你可以鏈接到任何你喜歡的來源）。

• 緊接着，我們檢查了jQuery全局對象。

• 如果jQuery的不存在，明顯的假設是，我們沒有 設法得到來自CDN的代碼，於是我們文件撰寫一個 script標籤獲得來自本地源的複印件。