尝试在线加载 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版本（Google的CDN url 上面使用了，但当然你可以链接到你喜欢的任何来源）。

• 紧接着，我们检查 jQuery 全局对象。

• 如果 jQuery 不存在，显而易见的假设是我们不存在 设法从 CDN 获取代码，然后我们 document.write 一个 脚本标签改为从本地来源获取副本。