Modernizr Yepnope Css Fallback

Question

私はCDNを使用してBootstrap.cssをロードしています。 私の質問は、CDNブートストラップが読み込まれたかどうかを確認する方法です。 もしそうでなければ、ローカルBoostrapをロードしてください。ここで

は...

<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> 

jQueryのフォールバックだと、これは、私は、CSSよりも、Modernizrをロードする方法である：

<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がロードされた場合、私は同じように..チェックすることができるか見当がつかない私は事前に

おかげでStoyan Stefanovの012

Answer 1

... .. modernizrとjQueryを使っていました、これは実際にちょうどちょうど前に更新を得ました。深い内訳についてはリンクをご覧ください。

しかし、style.sheet.cssRulesは、ファイルがロードされた後にのみ入力されるため、setIntervalで繰り返しチェックすると、CSSファイルがロードされたことを検出できます。彼らはYepNopeの「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の減価償却については、Modernizr（YepNopeはソフトウェアに含まれなくなります）と統合されたソリューションに移行しますが、Modernizrのライブラリは利用していません。溶液。 Offirmoは、Robert NymanとAbdul Munimの2つのすっきりした技術を組み合わせて、Modernizrに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; 
} 

はその後、我々は内のCSSプロパティをテストするために隠された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!') 
       } 
      } 
     } 
    } 
]);