Question

我的页面有一个默认的CSS代码。我正在head的底部注入一个CSS样式表文件，该文件使用JavaScript覆盖默认的样式表文件。出于某种原因，当我加载页面时，我看到默认的一个，然后用加载的样式表覆盖它，

我能做什么才能避免闪烁？我认为如果我在默认的一个后面的头部添加一个CSS我不会看到闪烁，因为内容尚未加载，但显然，它是。任何解决方案？

我不知道闪烁是否是正确的词，我只是看到默认的CSS，并在看到带有被覆盖的CSS的页面后立即看到。此外，也许它是相关的，被覆盖的CSS只会覆盖一些元素而不是所有元素。

以下是代码：

<head>
<link href="/Content/app.min.css?ver=17" rel="stylesheet" />

<script>
    // dark theme
    if (localStorage.getItem("current_theme") === "dark") {

        var head = document.head,
            link = document.createElement('link');

        link.type = 'text/css',
            link.rel = 'stylesheet',
            link.href = '/Content/dark_theme.min.css?r=' + 
                        (Math.floor(Math.random() * 20000) + 1);

        head.appendChild(link);

    }
</script>

// the JavaScript appended stylsheet will render here before the </head> element
</head>

新CSS的更改只在页面加载后才会发生。我在页脚中放了一个断点，只有在页面加载后才能看到新的CSS更新。

我发现这是因为样式表文件是异步加载的，因此延迟了。我需要内联注入CSS代码才能使其工作。问题在于，该方法是每次页面调用增加9KB而不是动态地基于localStorage变量值。

Answer 1

以下代码的运行速度更快：

<head>
<link href="/Content/app.min.css?ver=17" rel="stylesheet">

<script>
    // dark theme
    if (localStorage.getItem("current_theme") === "dark")     
        document.head.innerHTML += '<link rel="stylesheet" href="/Content/dark_theme.min.css">';
</script>
</head>

但你的做法是错误的。

你最好使用cookie来做这些事情。将主题名称保存到cookie。从请求标头中读取cookie，并在服务器端包含所需的css。所以客户收到：

<head>
    <link href="/Content/app.min.css?ver=17" rel="stylesheet">
    <link rel="stylesheet" href="/Content/dark_theme.min.css">
</head>

另外，我建议您在服务器上设置正确的Expires标头，并删除丑陋的?ver=17或?r=(Math.floor(Math.random() * 20000) + 1)

通过javascript添加样式表而不会闪烁

1 个答案: