javascript - 在应用 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 和 javascript。

在任何情况下，出于任何原因，如果您不想在主文档中调用 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
   });