使用回调在Chrome中动态加载样式表

Question

http://www.phpied.com/when-is-a-stylesheet-really-loaded/

使用此解决方案非常适合加载带回调的样式表，Chrome中除外。

在Chrome（第18版）中，我仍然可以看到正在应用的CSS，这会破坏一些其他依赖于动态加载的CSS的高度和宽度设置的功能。

任何想法???

谢谢！

Answer 1

在WebKit中，您可以轮询对document.styleSheets的更改，这是一个在lazyload中执行此操作的函数（取自https://github.com/rgrove/lazyload/blob/master/lazyload.js）

或者只是使用那个插件，它也是js：）

function pollWebKit() {
    var css = pending.css, i;

    if (css) {
      i = styleSheets.length;

      // Look for a stylesheet matching the pending URL.
      while (--i >= 0) {
        if (styleSheets[i].href === css.urls[0]) {
          finish('css');
          break;
        }
      }

      pollCount += 1;

      if (css) {
        if (pollCount < 200) {
          setTimeout(pollWebKit, 50);
        } else {
          // We've been polling for 10 seconds and nothing's happened, which may
          // indicate that the stylesheet has been removed from the document
          // before it had a chance to load. Stop polling and finish the pending
          // request to prevent blocking further requests.
          finish('css');
        }
      }
    }
  }