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

这是一种常见的闪烁＆＃39;问题，你也看到像AngularJS这样的框架。

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

CSS

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

JS

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

Answer 2

你好你可以使用Append或prepend的jQuery添加样式表，你可以使用JQuery的Delay（）添加它，这样你就可以根据你的时间线要求添加它

$(document).ready(function(){

setTimeout(function(){ 
         $("head").append("<link href='css/sarbasishstyle.css' rel='stylesheet' type='text/css'/>");
 }, 3000);
  
  
});

<html>
  <head>
    <title> Header is here </title>
    </head>
  
  <body>
    Hello
    </body>
 </html>

希望这可以帮助你，因为我已经尝试过它的工作

您可以删除不需要的css。您可以使用ID属性来完成。将Id添加到每个样式表并检查它是否存在于html中，然后删除不需要的样式表并添加必要的样式表。

谢谢。如果您有任何疑问，请告诉我

如何减少备用样式表的加载时间？

2 个答案:

CSS

JS