Loading CSS through jQuery and page load function

With an ajax call you can be sure your entire css is loaded.

$( document ).ready(function() {
    $.ajax({
        url: 'your_css_link',
        dataType: 'text',
        success: function(css) {
            $('<style type="text/css">\n' + css + '</style>').appendTo("head");
            myFunc();                 
        }                  
    });
});

There are a lot of problems hooking into the load event on link stylesheet tags but you can use the image.onerror loading hack

var head = document.getElementsByTagName( "head" )[0],
    body = document.body,
    css = document.createElement( "link" ),
    img = document.createElement( "img" ),
    cssUrl = "/path/to/a/css/file.css";

css.href = cssUrl;
css.rel = "stylesheet";
head.appendChild( css );

img.onerror = function() {
    // Code to execute when the stylesheet is loaded
    body.removeChild( img );
}

body.appendChild( img );
img.src = cssUrl;

And then in the img.onerror method:

img.onerror = function() {
    body.removeChild(img);
    jQuery(function($) {
        // stylesheet is loaded and the DOMContentLoaded event is also fired
    });
}

You should be able to do it by modifying what you have above but doing it in a single call.

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

This doesn't work IE less than 8 so you'll need to:

1. append the before setting its href; or
2. use IE's document.createStyleSheet() method

you try use load instead of ready, sometimes works n_n

the link element has load and error events, so that you can use them to determine if the css is loaded