javascript - 在JS中插入CSS链接标签时阻止页面渲染

Question

我希望允许我的用户在“浅色”主题(默认)和“深色”主题之间进行选择，“深色”主题是通过添加另一个 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 文件？

Answer 1

只需将 javascript 脚本放在 css 之前，这样您的主题就会在主 css 之前加载。

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