在 CDN 失败时加载本地 JS/CSS 的 HTML if 语句答案

【问题标题】：HTML if statement to load local JS/CSS upon CDN failure在 CDN 失败时加载本地 JS/CSS 的 HTML if 语句
【发布时间】：2012-05-28 03:04:13
【问题描述】：

当从 CDN 或任何外部服务器加载 CSS/JS 文件时，有可能（即使概率很低）由于外部故障而丢失文件。在这种情况下，html 页面将因缺少适当的 CSS 和 JS 而损坏。

是否有在 CDN 失败时加载本地版本的实用方法？

<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" />
IF (not loaded style.css){
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
}

对于JS来说会更容易，因为我们可以测试一个JS函数（在JS文件中提供）；然后，在失败时加载本地文件。例如，测试，如果 jQuery 库可用。

但是，我很想知道是否有实用的方法！

【问题讨论】：

stackoverflow.com/questions/3794128/…

标签： javascript html performance web

【解决方案1】：

我会这样做。

在样式表ui-helper-hidden 中创建一个类，然后添加一个 div 作为页面上的第一个元素；

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>

在您检查并确保您的 CDN javascript 文件已加载后，然后使用这段代码注意我使用的是 jquery

<script>
    // CSS Fallback
    $(function () {
        if ($('.ui-helper-hidden:first').is(':visible') === true) {
            $('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head');
        }
    });
</script>

这将检查应该隐藏的元素是否存在。如果它没有被隐藏，那么你就知道你的 css 文件没有从 CDN 加载。

jQuery and jQuery UI via a CDN我用这个方法

【讨论】：

【解决方案2】：

对于 Javascript，您可以在构建动态脚本时监听 onload 和 onerror 事件。但是，在这些相同的页面中，CSS 会以其他方式显示。

动态加载 CSS 的唯一可靠方法是通过 AJAX 来实现。您可以通过动态链接标签加载样式，但如果没有这些事件，您将根本不知道它们是否已加载。您可以对样式进行投票，但它是 IMO 的 hackish。

另一种方法是让服务器读取这些 CDN 文件。如果它们很好，请打印链接的 url。但是，如果这些链接已失效，请改为打印本地 url。这将更可靠，并将您的逻辑卸载到服务器。这假设您可以访问服务器。

或者更好的是，首先使用本地版本！有了良好的缓存，带宽就不会成为问题

【讨论】：