Javascript 如何使用jQuery实现；夜间模式“；是否在每次页面加载时都不闪烁白色？

我写了下面的代码，并将其放在我网站每页的

标签前面。它的工作原理很好，它将每页的背景变成黑色，文本变成白色，并记住该设置，直到用户将其更改回“日模式”

我遇到的问题是，当处于夜间模式时，夜间模式需要大约一秒钟的时间才能生效，这意味着每个页面加载上都有一个白色闪光灯

我尝试将上面的脚本放在页面更高的位置，但每次加载页面时，仍然会先看到白色的闪光。要明确的是，在没有从我的数据库加载那么多数据的页面上，白色闪烁非常短或几乎不存在。但在从数据库加载大量数据的页面上，闪存会持续大约一秒钟

---

这是可以修复的吗？提前感谢您的指点。

为了防止前端出现未格式化内容（FOUC）闪现，您可以使用“斗篷”技巧。AngularJS和VueJS都将此技术用于单页应用程序

在HTML中，设置样式标记以隐藏您的

这是因为嵌入的样式将首先运行，隐藏主体元素。然后，一旦加载javascript并准备好DOM，脚本将运行，取消隐藏主体

您可以通过将嵌入样式更新为以下内容来增强此功能，使其始终以黑色开头：

body * {
    display: none;
    background: #000;
}

---

这将使主体变黑并隐藏其所有子体。

正如我所提到的，不可能完全消除flash，但可以通过在头部执行而不使用类（因为样式表是异步加载的）来大大减少flash

在执行以下逻辑的

打开标记后添加一个脚本：

<script>
if(localStorage.night == "on") {
  document.body.style.backgroundColor = "#000";  // color of your choice
}
</script>

如果（localStorage.night==“打开”）{
document.body.style.backgroundColor=“#000”//颜色由您选择
}

请注意，不能使用jquery，因为此时未加载它。这将最大限度地减少页面颜色错误的时间

---

编辑：另一个可能的解决方案是使用CSS在服务器端进行更改，这应该具有相同的效果。问题是，由于CSS文件是异步加载的，因此您需要呈现样式内联。

您有一个FOUC'ing问题（FOUC=），样式应该从服务器呈现为CSS。这将防止闪烁。您可以在服务器端切换初始模式。如果你这样做，就不会有任何问题。@TravisJ谢谢，我将把这个移到服务器上。同样与其他帖子/评论相反，使用CSS和使用javascript一样有效（这与渲染“夜间模式”服务器端一样有效）。诀窍不在于你做了什么，而在于你在页面负载中做了什么。不知道是谁否决了这一点。这是一个伟大的解决方案！我不知道显示器是如何单独工作的，因为大多数浏览器的默认背景是白色的。在我看来，如果没有嵌入式样式，它实际上无法工作，因为嵌入式样式无法解决操作问题。嵌入式样式是同步加载的。

<style>
    body {
        display: none;
    }
</style>

$(function() {
    $(body).css('display', 'initial');
});

body * {
    display: none;
    background: #000;
}

<script>
if(localStorage.night == "on") {
  document.body.style.backgroundColor = "#000";  // color of your choice
}
</script>