当从 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 库是否可用。
不过,我很好奇是否有一个实用的方法!
我会这样做。
在样式表中创建一个类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 http://timjames.me/jquery-and-jquery-ui-fallbacks
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)