Determine whether to execute subsequent code after css is loaded. Example_javascript skills

I am currently writing the project framework and writing a JQueryMessageBox class to use the dialog() in jquery ui to display the message box. In order to make the method easy to call, I have added automatic judgment whether the page has added ui.js and ui .css, the code is as follows:

//如果没有包含ui.js,则引用 
if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ 
$(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head'); 
}} 
//如果没有加载css,则加载 
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ 
$('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head'); 

//dialog() script 
}}

But the CSS code will not be loaded immediately, so there will be no style when the dialog is displayed (this is OK under IE9, because under IE9, even if the CSS is downloaded later, the page elements will be redrawn, while IE8 does not Yes). To solve this problem, you can use ajax. After the css is loaded, the dialog will be displayed, so that it can be displayed with style. The code is as follows:

if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) { 
$.ajax({ 
url: '/css/jquery-ui-1.8.14.custom.css', 
success: function(data) { 
//创建一个style元素，并追加到head中 
//替换其中images的路径 
$('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head'); 
//dialog() script; 
} 
}); 
} 
else { 
//dialog() script; 
}