Jquery 将css文件预加载到缓存中以进行主题切换

我希望给用户切换一个主题的能力，我有两个独立的样式表，每个主题一个

我这样做是为了切换它

    toggleTheme() {
        if (usingWhiteTheme) {
            $('link[href="white.css"]').attr('href', 'dark.css');   
            usingWhiteTheme = false;        
        } else {
            $('link[href="dark.css"]').attr('href', 'white.css');    
            usingWhiteTheme = true;
        }
    }

但是，当它第一次从服务器加载文件时，会导致可怕的闪烁。之后，它会切换而不闪烁

---

如何预加载此样式，然后从缓存中加载？我是否应该使用缓存，或者对于关闭缓存的用户是否有更可靠的方法？我可以把它塞进本地存储吗？

穷人的解决方案是在页面底部放置一个隐藏的iframe，指向一个页面…其中包括所有css文件和所有其他要缓存的静态文件。不过，这取决于您如何使这种情况只发生一次。

以下是我在Dojo toolkit中观察到的方法

主题1

 document.body.className = "theme1";

为了他们2

 document.body.className = "theme2";

您的CSS应该是模块化的，如下所示

在theme1.css中

 .theme1 div{
     background-color : green
 }

在theme2.css中

 .theme2 div{
     background-color : yellow;
 }

---

出于我的目的，我能够在没有预加载的情况下绕过闪烁。Im使用预先制作的引导模板，它为每个主题提供了不同的css文件。因此，我没有预加载（我尝试了预加载，但由于某些原因仍然会闪烁），而是创建了一个新的.less或.scss文件，其中包含以下内容：

 body.white-theme {
     //pasted the entire theme's css here
 }

这只是用body.white-theme在编译的css中包装主题中的每个样式

---

现在我可以安全地同时加载两个样式表并切换类

查看并搜索“预处理css文件”，这项技术效果很好。有两个单独的样式表是可选的。