如何爲css文件實現CDN故障安全？

對於託管在CDN JavaScript的，我可以隨時添加一些腳本下方，以檢查它是否成功加載：如何爲css文件實現CDN故障安全？

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
if (!window.jQuery) { 
var script = document.createElement('script'); 
script.src = "/js/jquery.min.js"; 
document.body.appendChild(script); 
} 
</script>

我還用了一些主持的CSS文件，如引導。我該如何可靠地檢查它是否加載到網頁上，如果不是，則提供失效保護？

-----編輯--------

而且，順便說一句，我應該使用：

document.body.appendChild(script);

或：

document.write("<scr"+"ipt>"...);

哪一個保證所有瀏覽器的執行順序？

來源

2014-04-05 NeoWang

你可以使用onload和onerror事件......

<link rel="stylesheet" type="text/css" href="cdnurl/styles.css" 
    onload="alert('loaded')" onerror="javascript:loadCSSBackup()" />

的javascript：

function loadCSSBackup(){ 
    var css = document.createElement("link") 
    css.setAttribute("rel", "stylesheet"); 
    css.setAttribute("type", "text/css"); 
    css.setAttribute("href", 'backup/styles.css'); 
    document.getElementsByTagName("head")[0].appendChild(css); 
}

關於第二個問題，你應該避免使用document.write。如上面的代碼附加到正文或頭部應該沒問題。

來源

2014-04-05 09:52:04

可以保證css應用程序的順序嗎？如果第二個css B.css包含相同的類名來覆蓋A.css，但是A.css無法加載，並且在B.css加載後加載備份，它會覆蓋B，對不對？ – NeoWang

css文件被同步加載。所以，排序是A.css - >失敗 - > A-backup.css - > B.css。所以不應該有任何問題。檢查控制檯日誌http://jsfiddle.net/jJ4Yu/這是基於觀察不知道這是否真的是標準的行爲，但值得一試。 –

在Chrome上，至少在控制檯中是A.css-> B.css-> A-backup.css。也許一個可靠的方法是用腳本回調鏈接加載的CSS，但序列化下載，可能是不值得的。 – NeoWang

如何爲css文件實現CDN故障安全？

回答

相關問題