jQuery appending a CSS and running a function?

Question

I am trying to append a CSS file to the current HTML page like this:

    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "http://domain.com/chron/css/jquery.gritter.css"
    });
    $("head").append(css);

Once the css file has been downloaded, I want to call a particular function. I thought I would just put the function call after the $('head').append(css); line but am not sure if this will guarantee that the css file will first be downloaded before calling the function. Can someone please tell me how to do this?

Answer 1

How about retrieving via AJAX and placing it in a STYLE element:

$.ajax( {
    url: 'http://domain.com/chron/css/jquery.gritter.css'
    dataType: 'text'
    success: function( data )
    {
        $( '<style>' )
            .attr( 'type', 'text/css' )
            .text( data )
            .appendTo( 'head' );

        yourFunction();
    }
} );