Is there an Event that triggers after CSS loaded?
Hi. First time poster here, wondering if anyone can help me with this interesting little problem I have.
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 csslink = $(this).attr('href');
$('head link').remove();
$('head').append('<link type="text/css" href="'+ csslink +'" 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.