使用javascript/jQuery在不闪烁未设置样式的内容的情况下重新加载样式表

问题背景

我正在开发一个网页，用户可以在其中动态更改自定义水平菜单的样式。因此，页面顶部有一系列样式设置（高度、填充等）和预览。当他们更改这些设置时，我会重新加载菜单和css的html，使其具有新的值

问题

正如您在下面看到的，我正在加载html，一旦完成，我将应用html并重新加载css。这一切都有效。然而，在大多数情况下，html在没有任何样式的情况下闪烁是瞬间的。我相信这是在css重新生成时发生的。我需要防止这种情况

在没有样式设置的情况下，如何重新生成样式表，同时防止出现时间上的小差距？

$.get("http://www.url1.com", function(html) {
    // add the new html
    $(".preview-section").html(html);

    // reload stylesheet
    var timestamp = Math.round(+new Date()/1000);
    $("head").append($("<link/>", { rel: "stylesheet", href: "http://www.url2.com?cache="+timestamp, type: "text/css" }));
});

$.get（“http://www.url1.com，函数（html）{
//添加新的html
$（“.preview section”）.html（html）；
//重新加载样式表
var timestamp=Math.round（+new Date（）/1000）；
$（“head”）.append（$（“”，{rel:“样式表”），href:http://www.url2.com?cache=“+时间戳，键入：“text/css”}）；
});

您可以为

http://www.url2.com?cache=“+时间戳

第一个。 然后在回调中，首先将链接附加到head，它应该立即加载样式表，因为它在该点被缓存。 最后更新预览部分html

$.get("http://www.url1.com", function(html) {

   var timestamp = Math.round(+new Date()/1000);

   $.get("http://www.url2.com?cache="+timestamp, function() {
      // stylesheet is now cached in the browser
      // reload stylesheet
      $("head").append($("<link/>", { rel: "stylesheet", href: "http://www.url2.com?cache="+timestamp, type: "text/css" }));

      // add the new html
      $(".preview-section").html(html);
   });

});

$.get（“http://www.url1.com，函数（html）{
var timestamp=Math.round（+new Date（）/1000）；
$.get（”http://www.url2.com?cache=“+时间戳，函数（）{
//样式表现在缓存在浏览器中
//重新加载样式表
$（“head”）.append（$（“”，{rel:“样式表”），href:http://www.url2.com?cache=“+时间戳，键入：“text/css”}）；
//添加新的html
$（“.preview section”）.html（html）；
});
});

这一切都假设您可以控制url2.com的跨源设置。

您也可以使用

我检查了它的功能，发现它在标题中添加了一个带有css导入的内联样式：

<style class="lazyload" charset="utf-8">

    @import "http://maxcdn.bootstrapcdn.com/bootstrap/…

</style>

@进口”http://maxcdn.bootstrapcdn.com/bootstrap/…

也许你也可以在没有lazyload的情况下手动添加，但我还没有检查这是否有效

请看看这个。在那里，我找到了懒散的小费

lazyload的工作演示如下所示

（我没有对内容使用ajax调用，因为这应该不是问题。只需在ajax的done回调中调用lazyload，它就会工作。）

$（函数（）{
var addContent=函数（）{
var$well=$（'
）
.text（“这是由引导程序生成的”）；
$（'.preview section'）.html（$well）；
};
$（“#添加新按钮”）。单击（函数（）{
//加载CSS文件并将参数传递给回调函数。
LazyLoad.css（'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css，函数（arg）{
//把你的代码放在这里
addContent（）；
});
});
});

从外部stlysheet添加具有stlye的元素
在更新HTML之前尝试追加样式表。自定义值是静态的吗？例如，对于高度，您可以从“25px”、“50px”和“75px”中进行选择吗？或者其中一些是自由形式的输入？