尝试在线加载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标签获得来自本地源的复印件。