在应用js和css之前，使用ajax服务调用获取的HTML会被扭曲一段时间。

Question

我正在使用ajax进行服务调用，并在页面上加载HTML内容。这个HTML有内容、一些外部脚本调用和内部的css。但是当这个HTML被加载时，它会被扭曲一段时间(3-4秒)，然后js和css被应用到HTML中。有什么解决方案可以让我用js和css获得HTML，然后把它附加到div中或者我想放的地方。

            $.ajax({
                type: 'POST',    
                url: service-URL,
                crossDomain : _crossDomain,
                contentType : 'text/plain',
                data:JSON.stringify(objReq),
                error:function (xhr, ajaxOptions, thrownError){
                },
                success: function(outputHTML){
                    $("#contentDiv").html(outputHTML);
                }
            }); 

Answer 1

为了避免这种情况，您可以在主文档中加载css和javascripts。

在任何情况下，出于任何原因，如果您不希望在主文档中的ajax调用之前加载它们(例如，为了增强第一个页面的加载)，可以使用嵌套的ajax调用，如下所示：

   $.get(resource.url, {cache:true}, function(css) {
   //cache : true will handle browser cache , it will load instantly:  

       $("head").append($("<link>",{
          rel: "stylesheet",
          type: "text/css",
          href: resource.url
       }));

   }).then(function(){
      //You can now call your AJAX here
   });

Answer 2

当使用html()或innerHTML=时，您只将代码写入站点。然后，解释器必须理解这一点，这会导致延迟。相反，您可以将内容应用为DOM，方法是不将其作为文本/平原传递，或者创建一个documentFragment first document.createDocumentFragment()，这就像一个空节点，您可以将子节点追加到其中，然后将该片段追加到主DOM中。