jQuery Append CSS File and Wait until Loaded?

问题

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 ?

回答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)

回答2:

The first thing to do is to put your functions inside the ready method, that will execute those functions after the DOM has loaded.

<script type="text/javascript">
  jQuery(document).ready(function() {
    // Your functions come here
});
</script>

Then just put your script before the </body>. This way the append will be triggered just as the dom loads.

<script type="text/javascript">
$('head').append();
</script>

Another aproach is to use the load event:
Check this link with the working example, within it I've set the body with a green background, it loads the stackoverflow stylesheet that when finishes loading it changes the body to white.
http://jsfiddle.net/CQbqA/1/

来源：https://stackoverflow.com/questions/8767212/jquery-append-css-file-and-wait-until-loaded