1

我想让我的用户在“浅色”主题（默认）和“深色”主题之间进行选择，这是通过添加另一个 CSS 文件提供的。

这是 JavaScript 代码。正如你所看到的，我试图在未来提供额外的主题。

var themes = {
    "dark": "HTML/css/dark-theme.css"
};

var themeCssLink = document.createElement('link');
themeCssLink.setAttribute('rel', 'stylesheet');
document.getElementsByTagName('head')[0].appendChild(themeCssLink);

var theme = localStorage.getItem('theme');
if (!(theme in themes))
    theme = null;
if (theme !== null)
    themeCssLink.setAttribute('href', themes[theme])

这样做的问题是页面在深色主题 CSS 加载之前呈现，导致明亮的白色闪烁，我想知道如何防止。

我尝试的另一件事是在 HTML 中放置一个虚拟 LINK 元素：

<link href='' rel='stylesheet' type='text/css' id='theme-css'>

然后只需修改 JavaScript 中的 href：

var themeCssLink = document.getElementById('theme-css');
var theme = localStorage.getItem('theme');
if (!(theme in themes))
    theme = null;
if (theme !== null)
    themeCssLink.setAttribute('href', themes[theme]);

不幸的是，这具有相同的效果。

在加载主题 CSS 文件之前，如何说服浏览器阻止渲染？

4

1 回答 1

0

只需将您的 javascript 脚本放在您的 css 之前，以便您的主题在您的主 css 之前加载。

如果你这样做，你必须小心你的 main.css，这样它就不会覆盖你之前加载的主题 css。

于 2017-06-25T21:00:41.823 回答