7

从 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 库可用。

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

4

2 回答 2

5

我会这样做。

在样式表中创建一个类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 加载。

我通过 CDN 将此方法用于jQuery 和 jQuery UI

于 2012-05-21T15:52:45.843 回答
1

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

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

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

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

于 2012-05-21T15:47:29.393 回答