我写了下面的代码并将其放在 </body> 之前我网站每个页面上的标记。它非常有效，因为它将每个页面的背景变为黑色，将文本变为白色，并记住该设置，直到用户将其更改回“日间模式”。
<script>
var body = $("body");
var day = $("#day");
var night = $("#night");
var dayLi = $("#day-li");
var nightLi = $("#night-li");
var panel = $(".panel");
if(localStorage.night == "on"){
body.addClass("night");
panel.addClass("night");
dayLi.show();
nightLi.hide();
}else{
body.removeClass("night");
panel.removeClass("night");
nightLi.show();
dayLi.hide();
}
night.click(function(){
body.addClass("night");
panel.addClass("night");
localStorage.setItem("night","on");
dayLi.show();
nightLi.hide();
});
day.click(function(){
body.removeClass("night");
panel.removeClass("night");
localStorage.night = "off";
nightLi.show();
dayLi.hide();
});
</script>
.night类如您所料:
.night{
background-color: black;
color: white;
}
我遇到的问题是，在夜间模式下，夜间模式需要大约一秒钟才能生效，这意味着每次加载页面时都会出现白色闪光。
我尝试将上述脚本放在页面的较高位置，但在每次页面加载时仍然首先出现白色闪光。需要明确的是，在没有从我的数据库加载那么多数据的页面上，白色闪光非常短或几乎不存在。但是在从我的数据库加载大量数据的页面上，闪光持续了大约一秒钟。
这是可以修复的吗？在此先感谢您的指点。
最佳答案
正如我所提到的，完全消除闪光是不可能的，但是您可以通过在头脑中进行而不使用类来大大减少闪光(因为样式表是异步加载的)。
在您的 <body> 之后添加一个脚本执行此逻辑的开始标记:
<script>
if(localStorage.night == "on") {
document.body.style.backgroundColor = "#000"; // color of your choice
}
</script>
请注意，您不能使用 jquery，因为此时尚未加载它。这将最大限度地减少页面出现错误颜色的时间。
编辑:另一种可能的解决方案是使用 CSS 在服务器端进行更改，这应该具有相同的效果。问题是您需要呈现样式内联，因为 CSS 文件是异步加载的。
关于javascript - 如何使用 jQuery 实现 "night mode"而不会在每次页面加载时闪烁白色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40389002/