远程弹出iq问题- jquery

Question

简短的问题:我想为我的网站制作远程弹出窗口。

这些实际上是div元素，它们附带了css样式表。例：

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

我使用jquery /ajax函数获取这种弹出窗口。例如：

$.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");
        });

发生了什么事？

有些时候，css会在dom之后加载，这对用户体验来说非常烦人(特别是对于慢速浏览器)。

如何确保我的弹出窗口将显示平滑，这意味着确保弹出css已经加载之前，显示div！

Ps。现在可以将样式属性放置到弹出窗口中的所有div元素中。则需时数年:)

提前谢谢你！

Answer 1

将css代码添加到主css文件中，并将其加载到调用页，而不是在弹出窗口中加载。css将已经加载，这将使您的弹出窗口更加流畅。

您可能希望对弹出窗口中加载的脚本执行此操作，因为它们也可能加载得很慢。

如果仍然需要按顺序加载所有三个组件，请一次加载每个组件，以确保它们以正确的顺序加载，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"); }
        );
        });
});

如果css和js包括需要了解某些内容才能正确加载，则可以获取而不是加载，但这给您提供了基本的想法。