javascript - 如何减少替代样式表的加载时间？

Question

我正在使用 jQuery 主题切换器(使用本地存储)。我有 4 个按钮。单击每个按钮，加载相应的主题。

但是我这里有个问题。每次页面加载时，默认主题首先加载并切换到存储在本地存储中的主题。如何在不显示默认主题的情况下快速加载备用样式表？

        "<link id="styleswitch" href="#" rel="stylesheet" /> "
<ul class="nav collapse" style="">
    <li>
        <a href="javascript:void(0);"  data-toggle="load-css" data-uri="../../Styles/theme1.css" class="no-submenu">
            <div class="label  pull-right" style="background-color:#2980b9"><i class="fa fa-paint-brush"></i></div>
            <span class="item-text">&nbsp;Dodger Blue</span>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);"  data-toggle="load-css" data-uri="../../Styles/theme2.css" class="no-submenu">
            <div class="label  pull-right" style="background-color:#85668B"><i class="fa fa-paint-brush"></i></div>
            <span class="item-text">&nbsp;Medium Purple</span>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);"  data-toggle="load-css" data-uri="../../Styles/theme3.css" class="no-submenu">
            <div class="label  pull-right" style="background-color:#7EA53C"><i class="fa fa-paint-brush"></i></div>
            <span class="item-text">&nbsp;Olive Green</span>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);"  data-toggle="load-css" data-uri="../../Styles/theme4.css" class="no-submenu">
            <div class="label  pull-right" style="background-color:#6D90C5"><i class="fa fa-paint-brush"></i></div>
            <span class="item-text">&nbsp;Cornflower Blue</span>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);"  data-toggle="load-css" data-uri="../../Styles/theme5.css" class="no-submenu">
            <div class="label  pull-right" style="background-color:#1E5237"><i class="fa fa-paint-brush"></i></div>
            <span class="item-text">&nbsp;Default theme</span> <!--this is the default theme -->
        </a>
    </li>
</ul>

Answer 1

这是一个常见的“闪烁”问题，您在 AngularJS 等框架中也会看到。

解决方法很简单。您可以隐藏内容，直到初始化完成。

CSS

body {
  display: none; 
}
body.initialized {
  display: block;
}

JS

// Initialization like loading the stylesheet, then
document.body.classList.add('initialized');