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

Goo*_*bot 7 html javascript performance web

从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" />
}
Run Code Online (Sandbox Code Playgroud)

为JS做这个会更容易,因为我们可以测试JS函数(在JS文件中提供); 然后,在失败时加载本地文件.例如,测试,如果jQuery库可用.

但是,我很想知道是否有实用的方法!

Tim*_*mes 5

我会这样做的.

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

<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>
Run Code Online (Sandbox Code Playgroud)

在检查以确保已加载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>
Run Code Online (Sandbox Code Playgroud)

这将检查是否应该隐藏的元素.如果它不隐藏,那么您知道您的css文件尚未从CDN加载.

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