cssのロードが完了したら、後続のコードを実行する方法

1695 ワード

最近、プロジェクトを書くframeworkでJQueryMessageBoxのクラスを書いて、jquery uiのdialog()を使ってメッセージボックスを表示し、メソッドの呼び出しを容易にするために、自動判断ページがuiに入ったかどうかを判断する.jsとui.css、コードは以下の通りです.
//      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
    }}

しかし、CSSコードはすぐにロードすることはないので、dialogを表示する際にはスタイルはありません(IE 9では可能ですが、IE 9でCSSをダウンロードしてもページ要素を再描画しますが、IE 8ではできません).この問題を解決する方法はajaxを使用して、cssのロードが終わった後にdialogを表示して、このようにスタイルを持って表示することができて、コードは以下の通りです:
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;
            }