重新加载样式表，而不使用 javascript/jQuery 闪烁未设置样式的内容

Reloading stylesheet without flashing of unstyled content using javascript/jQuery

本文关键字：样式 闪烁 jQuery javascript 设置 加载 新加载      更新时间：2023-09-26

>问题背景

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

先对http://www.url2.com?cache="+timestamp进行ajax调用。然后在它的回调中，首先将链接附加到 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);
   });
});

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

你也可以使用lazyload js。

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

<style class="lazyload" charset="utf-8">
    @import "http://maxcdn.bootstrapcdn.com/bootstrap/…
</style>

也许您也可以手动添加它而无需延迟加载，但我还没有检查这是否有效。

请看一下这个SO问题。在那里，我找到了带有懒惰负载的提示。

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

（我没有对内容使用 ajax 调用，因为这应该不是问题。只需在 ajax 的 done 回调中调用 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>

相关文章：