Question

问题背景

我正在开发一个网页，用户可以动态更改自定义水平菜单并为其设置样式。所以有一堆样式设置（高度，填充等等）和页面顶部的预览。当他们更改这些设置时，我会重新加载菜单和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" }));
});

Answer 1

您可以先为http://www.url2.com?cache="+timestamp拨打ajax电话。然后在回调中，首先将链接附加到头部，该头部应立即加载样式表，因为它在此时缓存。最后更新您的预览部分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);
   });

});

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

Answer 2

您也可以使用lazyload js。

我已经检查了它的作用，我发现它在标题中添加了带有css导入的内联样式：

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

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

</style>

也许你也可以手动添加这个lazyload，但是我没有检查是否可行。

请查看此SO question。在那里，我发现了lazyload的提示。

lazyload的工作演示在下面，jsFiddle。

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

$(function () {

    var addContent = function () {
        var $well = $('<p class="well"/>')
            .text('This is stlyed by bootstrap');
        $('.preview-section').html($well);
    };

    $('#addNewButton').click(function () {
        // Load a CSS file and pass an argument to the callback function.
        LazyLoad.css('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css', function (arg) {
            // put your code here
            addContent();
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazyload/2.0.3/lazyload-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addNewButton">Add element with stlye from external stlyesheet</button>
<div class='preview-section'></div>

使用javascript / jQuery重新加载样式表而不闪烁无格式内容

2 个答案: