Question

I am trying to append a css file using

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');


That works great – however, I have some functions that run AFTER the css has been added and I can’t figure out a way for these to wait until this file has finished loading ?

How can I do this ?

Answer 1

Just check when one of the rules of the new CSS has been applied:

$('head').append('<link rel="stylesheet" href="http://cdn.sstatic.net/stackoverflow/all.css?v=d4a5c7ca0d4c" type="text/css" />');

var fakeListener = setInterval(function(){
    if($("body").css("text-align")=== "center"){
        clearInterval(fakeListener)
        // What you want to do after it loads
    }
},50)

(That is a working example)