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();
    }
} );

Answer 2

Well. The tag should have a attribute named complete, that is set to true when it is loaded. You could test it every 50 milliseconds if you want or perhaps onload would work.

Eg

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

//As i have no idea whether the onload event
//works on link elements or not, try this instead:
setTimeout(function(){
    if(!css.complete)
    { setTimeout(arguments.callee, 50); }
    else
    { /* callback */ }
}, 50);