JQuery event that triggers after CSS is loaded?

Posted by Dave on Stack Overflow See other posts from Stack Overflow or by Dave
Published on 2010-04-03T11:53:38Z Indexed on 2010/04/03 12:03 UTC
Read the original article Hit count: 167

(I posted this on the jquery forums but it's still awaiting moderation, so I thought I'd try my luck here since stackoverflow is so awesome. If I get an answer I'll post it here.)

Maybe someone can help me with this,

I have a couple of links on my page (inside a <div id="theme-selector">) which allow you to change the CSS stylesheets:

$('#theme-selector a').click(function(){
  var path = $(this).attr('href');
  $('head link').remove();
  $('head').append('<link type="text/css" href="'+path+'" rel="stylesheet" />');
  return false;
});

Now, after I've changed the style on the page, I want to get the new background color, using the following code (which I put after the $('head').append call):

var bgcolor = $('body').css('background-color');
alert(bgcolor); 

The problem is, I think, that it takes some time for the browser to download the new stylesheet and I sometimes get the old background color in my alert message. Is there some event I can bind that will only alert me after all the stylesheets are loaded on the page?

At the moment, all I can think of is using a setTimeout(function(){}, 5000); which isn't great, because what if it takes longer/shorter to load all the CSS on the page.

Let me know if I need to clarify anything and I can provide more code. Thanks in advance.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript