Question

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

是否有实用的方法在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库可用。

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

Answer 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

Answer 2

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

动态加载CSS的唯一可靠方法是通过AJAX来实现。您可以通过动态链接标记加载样式但没有这些事件，您将无法知道它们是否已被加载。你可以轮询样式，但它是hackish IMO。

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

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

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

2 个答案: