JQuery event that triggers after CSS is loaded?
- by Dave
(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.
