Remote Popup iq Question - jquery

Short question: I want to make remote popups for my website.

Those are in fact div elements which have a css stylesheet attached. eg:

<div id="popupDiv">
   <link rel="stylesheet" type="text/css"  ...>
   <script src="..."/>
   <div id="popupMessageDiv"> bla bla bla</div>
</div>

I fetch this kind of popups using jquery load/ajax function. e.g.

$.get("/ajax/show-publish-test-popu开发者_Go百科p",
        {
            "title": $("#title").val(),
            "description": $("#description").val(),
            "questionsCount" : visibleQuestionsCount,
            "passingMark" : $('#passingMarkHI').val(),
            "categoryId":  $('#categoryIdHI').val()
        },
        function(data){
             $(data).appendTo("body");
        });

What is happening?

There are some moments, where it seams that the css is loaded after the dom, and is very very annoying this behavior to user experience (especially for slow browsers ie).

How can I be sure that my popups will be displayed smooth, meaning ensure that the popup css is already loaded before displaying the div!

Ps. there is now way to put style attributes to all div elements inside popups. it will take years :)

Thank you in advance!

---

Add your css code to a main css file and load it on the calling page rather than having it in the popups. The css will already be loaded and this will make your popups much smoother.

You may want to do this for the scripts you are loading within the popups, as they may load slowly as well.

If you still need to load all three in order, load each component one at a time, to ensure they load in the correct order, IE

$.load("/ajax/show-publish-test-popup-css", function(css) 
    {
    $(css).appendTo("body");

        $.load("/ajax/show-publish-test-popup-js", function(js) {
            $(js).appendTo("body");                 

        $.get("/ajax/show-publish-test-popup",
            {
                "title": $("#title").val(),
                "description": $("#description").val(),
                "questionsCount" : visibleQuestionsCount,
                "passingMark" : $('#passingMarkHI').val(),
                "categoryId":  $('#categoryIdHI').val()
                }, function(data) { $(data).appendTo("body"); }
        );
        });
});

If the css and js includes need to know certain things to load properly, they can be gets instead of loads, but that gives you the basic idea.