Modernizacja Yepnope Css Fallback

Question

Używam CDN do ładowania Bootstrap.css. Moje pytanie brzmi: jak mogę sprawdzić, czy bootstrap CDN został załadowany/znaleziony. A jeśli tak nie było, to załaduj lokalny Boostrap.

Oto Jquery awaryjna ..

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

I to jest jak załadować modernizr niż 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> 

nie mam pojęcia w jaki sposób mogę sprawdzić, czy css został załadowany .. podobnie jak zrobiłem z modernizr i jQuery ..

z góry dzięki ...

Answer 1

Stoyan Stefanov has had a Pure JS solution for this for some time now, która właśnie dostała aktualizację nie tak dawno temu. Sprawdź link, aby uzyskać szczegółowy opis.

Ale style.sheet.cssRules zostanie wypełniony dopiero po załadowaniu pliku, więc sprawdzając go wielokrotnie za pomocą setInterval jesteś w stanie wykryć po załadowaniu pliku 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 uznaje stosowanie tej techniki, choć pamiętać, że w ich dokumentacji YepNope za „zwrotna nie czeka na css, aby rzeczywiście być załadowany”.

Plus z najnowszą amortyzacją YepNope, przejdźmy do rozwiązania, które integruje się z Modernizr (który nie będzie już zawierać YepNope w swoim oprogramowaniu), ale nie używa żadnej z bibliotek Modernizr, ponieważ wciąż nie mają one rodzimego rozwiązanie. Offirmo łączy kilka zgrabnych technik od Robert Nyman i Abdul Munim, aby Modernizr wiedział, że CSS jest faktycznie załadowany.

Zaczynamy następującej funkcji, która pozwala nam uzyskać właściwości CSS elementu:

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

Następnie używamy poniższego funtion stworzyć ukryty element DOM przetestować właściwości CSS w ciągu:

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); 
    } 
} 

teraz możemy niezawodnie wiedzieć, w ciągu modernizr, jeśli nasz CSS jest gotowy, aby przejść:

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!') 
       } 
      } 
     } 
    } 
]);