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

从CDN或任何外部服务器加载CSS/JS文件时，由于外部故障可能（即使概率较低）错过文件。在这种情况下，由于缺乏合适的CSS和JS，html页面将被破坏。HTML if语句在CDN失败时加载本地JS/CSS

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

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

来源

2012-05-21 Googlebot

http://stackoverflow.com/questions/3794128/how-to-check-if-an-external-css-file-is-loaded-using-javascript – WojtekT

我会这样做。

在样式表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

来源

2012-05-21 15:52:45

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

动态加载CSS的唯一可靠方法是通过AJAX来完成。你可能通过动态链接标签加载样式，但没有这些事件，你不知道他们是否已经加载。你可以轮询风格，但它是黑客海事组织。

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

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

来源

2012-05-21 15:47:29 Joseph

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

回答

相关问题