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

Question

我希望让用户能够切换主题，并且我有 2 个单独的样式表，每个主题 1 个。

我做了这样的事情来切换它

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

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

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

Answer 1

这是我在 Dojo 工具包中观察到的方法。

主题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;
 }