200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 网站白天or黑夜切换在重新加载时闪烁白色背景的解决思路

网站白天or黑夜切换在重新加载时闪烁白色背景的解决思路

时间:2023-01-15 16:25:54

相关推荐

网站白天or黑夜切换在重新加载时闪烁白色背景的解决思路

一般网站主题设置的白天or黑夜通过js来切换开关,并且通过cookie值来存储当前是白天or黑夜,但是如果网站访问慢的时候,会导致黑夜的时候,网页还没有读取到cookie值的内容,便已经加载了css里面的白色背景,然后读取cookie后再迅速切换到了黑色背景

此时便导致了出现闪烁白色背景的现象

于是通过下面的一篇文章思路尝试这样的解决,下面的文章提到(内部放置一个小的< script> 标签来阻止页面呈现文档的< head>)但是尝试多次,发现还是未能解决,但是白天or黑夜的设置确实已经通过js存储到了localStorage值里面,于是……

在head之前添加了

让data-theme来获取localStorage.theme的白天or黑夜值

然后在把主题里面的css白天和黑夜的背景颜色通过 :root 选择器来赋值,也就是背景颜色会以var(–bg-body)来设置背景色,但是此时var(–bg-body)是未知的颜色

因此加了这一段

[data-theme=“0”] {

–bg-body: #f6f8fb;

–bg-secondary: #fff;

}

[data-theme=“1”] {

–bg-body: #192039;

–bg-secondary: #1f2745;

}

当data-theme的为白天或者黑夜的时候,便开始给var(–bg-body)赋予了颜色值,从而在继续加载css样式的时候才会显示var(–bg-body)已经指定的颜色值,这样就没有了黑夜展示之前的闪烁白色背景了,因为黑夜模式下,白色背景是不存在

但是部分主题只是设置了毕竟明显大部分位置,比如背景,框架背景,头部背景,保证了这部分地方是解决了闪烁白色背景的问题,但是实际上其他的元素,区域还是会有白色的闪烁,只是可能极为短暂,容易忽视掉……

完整代码地址:/1177

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。