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

Question

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

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

在 Chrome (v18) 中，我仍然可以看到正在应用的 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');
        }
      }
    }
  }