Modernizr Yepnope Css Fallback

Question

我正在使用CDN加載Bootstrap.css。 我的問題是我如何檢查CDN引導程序是否被加載/找到。 如果不是，則加載本地Boostrap。

這裏是jQuery的後備..

<script type="text/javascript"> 
     Modernizr.load([ 
      { 
       load: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js', 
       complete: function() { 
        if (!window.jQuery) { 
         Modernizr.load([ 
          { 
           load: config.js + 'vendor/jquery-1.10.1.min.js', 
           complete: function() { 
            console.log("Local jquery-1.10.1.min.js loaded !"); 
           } 
          } 
         ]); 
        } else { 
         console.log("CDN jquery-1.10.1.min.js loaded !"); 
        } 
       } 
      } 
     ]); 
    </script> 

這也是我如何加載Modernizr的比定製CSS：

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> 
    <script type="text/javascript"> 
    if (typeof Modernizr == 'undefined') { 
     document.write(unescape("%3Cscript src='" + config.js + "/vendor/modernizr-2.6.2-respond-1.1.0.min.js' type='text/javascript'%3E%3C/script%3E")); 
     console.log("Local Modernizer loaded !"); 
    } 
    </script> 

    <script type="text/javascript"> 
     Modernizr.load([ 
     { 
      load: config.css + "bootstrap.css", 
      complete: function() { 
       console.log("bootstrap.css loaded !"); 
      } 
     }, 
     { 
      load: config.css + "responsive.css", 
      complete: function() { 
       console.log("responsive.css loaded !"); 
      } 
     }, 
     { 
      load: config.css + "icons.css", 
      complete: function() { 
       console.log("Fontello icons.css loaded !"); 
      } 
     }, 
     { 
      load: config.css + "icons-ie7.css", 
      complete: function() { 
       console.log("Fontello icons-ie7.css loaded !"); 
      } 
     }, 
     { 
      load: config.css + "animation.css", 
      complete: function() { 
       console.log("Fontello animation.css loaded !"); 
      } 
     } 
     ]); 
    </script> 

我不知道，如果CSS加載我如何能檢查..就像我做了Modernizr的和jQuery ..提前

謝謝...

Answer 1

斯托揚斯特凡has had a Pure JS solution for this for some time now，實際上剛剛得到更新不久。查看深入分解的鏈接。

但是style.sheet.cssRules只會在文件加載後纔會被填充，因此通過反覆檢查setInterval您可以檢測到您的CSS文件加載後。

d = document; 
d.head || (d.head = d.getElementsByTagName('head')[0]); 

var style = d.createElement('style'); 
style.textContent = '@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"'; 

var fi = setInterval(function() { 
    try { 
     style.sheet.cssRules; 
     console.log('loaded!'); 
     clearInterval(fi); 
    } catch(e){ 
     console.log('loading...'); 
    } 
}, 10); 

d.head.appendChild(style); 

YepNope承認，使用這種技術，但他們自己的文檔是YepNope的「回調不等待的CSS實際加載」的注意。

加上與YepNope近期的貶值，讓我們走上來，隨着Modernizr的（誰不再包括YepNope在其軟件）集成，但不使用任何的Modernizr的圖書館的解決方案，因爲他們仍然沒有一個本土解。 Offirmo結合了來自Robert Nyman和Abdul Munim的幾個簡潔技巧，讓Modernizr知道CSS實際上已加載。

我們先從下面的函數，這使我們能夠獲得一個元素的CSS屬性：

function getStyle(oElm, strCssRule){ 
    var strValue = ""; 

    if (document.defaultView && document.defaultView.getComputedStyle){ 
     strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); 
    } else if (oElm.currentStyle){ 
     strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ 
      return p1.toUpperCase(); 
     }); 
     strValue = oElm.currentStyle[strCssRule]; 
    } 

    return strValue; 
} 

然後我們使用以下funtion創建一個隱藏的DOM元素中測試了CSS屬性：

function test_css(element_name, element_classes, expected_styles, rsrc_name, callback) { 
    var elem = document.createElement(element_name); 
    elem.style.display = 'none'; 
    for (var i = 0; i < element_classes.length; i++){ 
     elem.className = elem.className + " " + element_classes[i]; 
    } 
    document.body.appendChild(elem); 

    var handle = -1; 
    var try_count = 0; 
    var test_function = function(){ 
    var match = true; 
    try_count++; 
    for (var key in expected_styles){ 
     console.log("[CSS loader] testing " + rsrc_name + " css : " + key + " = '" + expected_styles[key] + "', actual = '" + get_style_of_element(elem, key) + "'"); 
     if (get_style_of_element(elem, key) === expected_styles[key]) match = match && true; 
     else { 
      console.error("[CSS loader] css " + rsrc_name + " test failed (not ready yet ?) : " + key + " = " + expected_styles[key] + ", actual = " + get_style_of_element(elem, key)); 
      match = false; 
     } 
    } 

    if (match === true || try_count >= 3){ 
      if (handle >= 0) window.clearTimeout(handle); 
      document.body.removeChild(elem); 

      if (!match) console.error("[CSS loader] giving up on css " + rsrc_name + "..."); 
      else console.log("[CSS loader] css " + rsrc_name + " load success !"); 

      callback(rsrc_name, match); 
     } 

     return match; 
    } 

    if(! test_function()){ 
     console.info("" + rsrc_name + " css test failed, programming a retry..."); 
     handle = window.setInterval(test_function, 100); 
    } 
} 

現在我們能夠可靠地知道，內Modernizr的，如果我們的CSS是蓄勢待發：

Modernizr.load([ 
    { 
     load: { 'bootstrap-css': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' }, 
     callback: function (url, result, key){ 
      //THIS IS OUR TEST USING THE ABOVE FUNCTIONS 
      test_css('span', ['span1'], {'width': '60px'}, function(match){ 
       if (match){ 
        console.log('CDN Resource Loaded!'); 
       } else { 
        console.log('Fallback to local resource!') 
       } 
      } 
     } 
    } 
]);