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

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

javascript css

通过javascript添加样式表而不闪烁,javascript,css,Javascript,Css,我的页面有一个默认的CSS代码。我正在将CSS样式表文件注入头部的底部，该头部使用JavaScript覆盖默认样式表文件。由于某种原因，当我加载页面时，我会看到默认页面，然后它会用加载的样式表覆盖它我该怎么做才能不出现闪烁？我认为，如果我在头的末尾添加一个CSS，在默认的CSS之后，我不会看到闪烁，因为内容还没有加载，但显然，它是。有什么解决办法吗我不知道闪烁是否是正确的词，我只是看到了默认的CSS，然后立即看到了带有覆盖CSS的页面。此外，可能是相关的，被覆盖的CSS只覆盖部分元素，而不是

我的页面有一个默认的CSS代码。我正在将CSS样式表文件注入

头部的底部，该头部使用JavaScript覆盖默认样式表文件。由于某种原因，当我加载页面时，我会看到默认页面，然后它会用加载的样式表覆盖它
我该怎么做才能不出现闪烁？我认为，如果我在头的末尾添加一个CSS，在默认的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>


//黑暗主题
if（localStorage.getItem（“当前_主题”）=“暗”）{
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）；
头.子（链接）；
}
//附加JavaScript的样式表将在元素之前呈现在此处

发生的情况是，新CSS的更改仅在页面加载后发生。我在页脚中放置了一个断点，只有在加载页面后，我才能看到新的CSS更新
我发现这是因为样式表文件是异步加载的，因此延迟。我需要内联注入CSS代码以使其工作。这种方法的问题在于，它会向每个页面调用添加9KB，而不是基于localStorage变量值动态地添加
 以下代码运行速度更快：
<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>


//黑暗主题
if（localStorage.getItem（“当前_主题”）=“暗”）
document.head.innerHTML+=''；

但你的方法是错误的
你最好用饼干来做这东西。将主题名称保存到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）
在您的情况下，是什么导致闪烁？是字体吗？您也可以尝试在页眉的开头移动样式表。@gauravmuk我只看到默认css中的页面，一秒钟后我看到注入css中的颜色变化。也许闪烁不是正确的词，它只是我首先看到默认值，然后看到更改。在加载所有CSS（包括第二个CSS）之前，我不应该看到该页面，但由于某种原因，我在加载页面后看到了更改。什么时候执行JavaScript？如果在pageload（技术上是在pageload之后）执行，那么新的CSS只有在默认CSS已经加载之后才会生效。我认为您需要寻找类似的东西，这将解释问题。如果您在没有JS的情况下手动将新工作表添加到页面底部，是否会出现问题？@myfunkyside我将在一秒钟内将代码添加到问题中。ver=17
与expires标题相比有许多优点，但其他方面的答案都是正确的。