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

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');

Answer 2

您好，您可以使用jQuery的Append或prepend方法添加样式表，也可以使用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 个解决方案

解决方案1
3 2015-04-21 05:25:31

的CSS

JS

解决方案2
0 2015-04-21 06:24:39

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

问题描述

2 个解决方案

解决方案1 3 2015-04-21 05:25:31

的CSS

JS

解决方案2 0 2015-04-21 06:24:39

解决方案1
3 2015-04-21 05:25:31

解决方案2
0 2015-04-21 06:24:39