文章/答案/技术大牛

发布

社区首页 >问答首页 >如何减少替代样式表的加载时间？

问如何减少替代样式表的加载时间？
EN

Stack Overflow用户

提问于 2015-04-21 13:11:25

回答 2查看 97关注 0票数 0

我使用的是jQuery主题切换器(带本地存储)。我有四个纽扣。单击每个按钮，就会加载相应的主题。

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

        "<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>

css

javascript

jquery

html

回答 2

Stack Overflow用户

发布于 2015-04-21 13:25:31

这是一个常见的“闪烁”问题，你也可以在AngularJS这样的框架中看到。

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

CSS

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

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

票数 3

Stack Overflow用户

发布于 2015-04-21 14:24:39

您好，您可以使用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中，然后删除不需要的，并添加必要的。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29763437

复制

相似问题

问如何减少替代样式表的加载时间？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何减少替代样式表的加载时间？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何减少替代样式表的加载时间？
EN