Zapewnić lokalną awaryjne dla CSS z CDN

Question

mam ładowania Bootstrap CSS na mojej stronie z CDN bootstrapcdn.com

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 

Jak mogę sprawdzić, czy arkusz stylów został załadowany, a jeśli nie zapewniają lokalną fallback?

I do nie chcę czekać na załadowanie biblioteki jQuery lub innych przed wykonaniem testu; Najpierw chcę załadować wszystkie CSS na stronę.

Answer 1

To jest to, co stworzyłem dla naszych potrzeb. Jeśli to spełnia twoje potrzeby, po prostu wywołaj funkcję ensureCssFileInclusion (plik do sprawdzenia, wartość boolowska). Będziesz musiał dostosować go do swoich potrzeb, aby upewnić się, że podasz cssFileToCheck, fallbackCssFile w tej funkcji.

/** 
* Checks the page for given CSS file name to see if it was already included within page stylesheets. 
* If it was, then this function does nothing else. If CSS file was not found among page stylesheets, 
* then this function will attempt to load the stylesheet by adding an HTML link tag to the document 
* HEAD section. You must also specify whether given cssFileToInclude is a relative path or an absolute path. 
*/ 
ensureCssFileInclusion = function(cssFileToInclude, isRelativePath) { 
    if (isRelativePath) { 
    if (!window.location.origin) { 
     cssFileToInclude = window.location.protocol+"//"+window.location.host + cssFileToInclude; 
    } 
    } 
    var styleSheets = document.styleSheets; 
    for (var i = 0, max = styleSheets.length; i < max; i++) { 
    if (styleSheets[i].href == cssFileToInclude) { 
     return; 
    } 
    } 
    // because no matching stylesheets were found, we will add a new HTML link element to the HEAD section of the page. 
    var link = document.createElement("link"); 
    link.rel = "stylesheet"; 
    link.href = cssFileToInclude; 
    document.getElementsByTagName("head")[0].appendChild(link); 
};