在JS中插入CSS链接标签时，请防止页面渲染

Question

我想允许我的用户在"灯"主题(默认"主题和"黑暗"主题之间进行选择，这是通过添加另一个CSS文件提供的。p>这是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])

问题是，该页面在Dark Themoe CSS加载之前呈现，引起了明亮的白色闪光灯，我想知道如何预防。

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

<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。