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库可用.
但是,我很想知道是否有实用的方法!
我会这样做的.
在样式表中创建一个类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