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

In WebKit, you can poll for changes to document.styleSheets, here is a function that do that in lazyload (taken from https://github.com/rgrove/lazyload/blob/master/lazyload.js)

Or just use that plugin it does js too 🙂

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