使用yepno，我怎么知道如果css资源被成功加载

Using yepnope, how can I know if a css resource was loaded successfully?

本文关键字：资源 成功 加载 css 如果 yepno 我怎么知道 使用      更新时间：2023-09-26

我正在开发一个公司内部使用的web应用程序，该公司有严格的(不断发展的)防火墙。

我正在使用yepnope.js/Modernizr。

从CDN加载js和css文件。

但是我怎么知道css是否加载成功?是否有一种方法来测试成功加载和激活css ?

感谢@Morpheus的提示，这里是一个解决方案:

首先，为了不依赖于任何东西(jQuery等)，我们需要定义2个函数:
  • 获取元素css属性的方法之一:
从http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

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;
},
    另一个是创建一个隐藏的DOM元素并测试它的css属性:
从https://stackoverflow.com/a/8122005/587407 

function test_css(element_name, element_classes, expected_styles, rsrc_name, callback) {
  // create an element of given type
  var elem = document.createElement(element_name);
  // immediately hide it
  elem.style.display = 'none';
  // give it the class(es)
  for (var i = 0; i < element_classes.length; i++) {
    elem.className = elem.className + " " + element_classes[i];
  }
  // and add it to the DOM
  document.body.appendChild(elem);
  // test the given properties
  // it happens (~1/3 times in local)
  // that the css takes a few ms to apply.
  // so we need a function that we can try directly first
  // and retry again later in case of failure
  var handle = -1;
  var try_count = 0;
  var test_function = function() {
    var match = true; // so far
    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);
      // remove our test element from the DOM
      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;
  }
  // use and program the function
  if(! test_function() ) {
    console.info("" + rsrc_name + " css test failed, programming a retry...");
    handle = window.setInterval(test_function, 100);
  }
}

请注意，由于延迟加载css，前面的函数比较棘手。

我们现在可以像这样使用yepnope:

{
  load: { 'bootstrap-css': 'http//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' },
  callback: function (url, result, key) {
  // here for bootstrap, I test presence of .span1 class
  test_css('span', [ 'span1' ], { 'width': '60px' }, function(match) {
    if( match )  {
      // it worked !
    }
    else {
      // ... fallback on another CDN or local rsrc...
    }
  }
}
相关文章：