javascript - Dynamically load stylesheet in Chrome with callback

Question

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

Using this solution has worked great for loading a stylesheet with a callback, except in Chrome.

In Chrome (v18) I can still see the CSS being applied, which screws up some other functions that depend on the height and width settings from the dynamically loaded CSS.

Any ideas???

Thanks!

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