网站白天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)已经指定的颜色值，这样就没有了黑夜展示之前的闪烁白色背景了，因为黑夜模式下，白色背景是不存在

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

完整代码地址：https://www.dpaoz.com/1177

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

vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...
图片预加载的问题-----有针对加载和缓存的兼容解决
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多 ...
移植驱动完毕后加载时的version magic报错原因以及解决办法
History:2012-02-17 Author:yingru 移植rt3070的AP驱动到装有fedora14的PC机上时,模块编译完毕后,加载时提示invalid module format. ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
vue跳转页面增加等待_vue-router懒加载时添加loading效果
近期在做一个微信公众号的项目,在页面跳转时发现页面会闪一下,用户体验很不好,而且如果网慢时页面是没有数据的样式会乱很丑.于是乎,就百度看了前人的各种解决方案,个人觉得以下链接中的方案还是很好的,代码简 ...
(原创)easyui 页面加载慢的原因及解决办法
Easyui 框架简单.易用,且功能丰富,可以满足大多的管理类网站开发的要求.但越开发到后面的时候, 总感觉页面加载越来越慢,有时打开一个页面需要好几秒甚至十几秒,这种体验是非常糟糕的. 刚开始还以 ...
7.JavaScript异步加载与加载时间线
JavaScript异步加载与加载时间线上一篇 JavaScript浅层克隆和深层克隆下一篇 JavaScript事件处理模型 - 事件冒泡,捕获文章目录 JavaScript异步加载与加载时间 ...
实现图片加载时显示百分比思路——serverpush
讨论群66541167 问题由 [广州]backUp(380045134) 15:01:11 各位老板,有没有办法实现图片加载时显示百分比啊? 引出由 [宜昌]大刀(624255696) 15: ...
加载vue文件步骤_无法在重新加载时读取vue文件
我正在使用vue-pdf和vue-server-renderer . 在内部浏览页面时,它工作正常,但在重新加载时,webpack无法在vue-pdf模块中读取.vue文件 . vue-pdf/src ...

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

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

最新文章

热门文章