gpt4 book ai didi

javascript - 如何使用 jQuery 实现 "night mode"而不会在每次页面加载时闪烁白色?

转载 作者:可可西里 更新时间:2023-11-01 13:00:33 31 4
gpt4 key购买 nike

我写了下面的代码并将其放在 </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/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com