Jquery样式切换器-如何移除样式闪烁，而一个.css加载

我有一个简单的代码来改变一个简单的clic样式。它工作得很好，但它有一个风格闪烁，我想防止-一个被禁用和其他未完全加载之间的一点超时-

我还想添加一个cookie，这样用户就不必每次他/她进入时都选择他们喜欢的样式。但老实说，我不知道如何做到这一点，因为我是新的jquery。所以如果有人能帮助我，那就太好了!

感谢阅读!

我有这个代码来切换我的网站的样式:

HTML调用主样式和主颜色

   <style type="text/css"> @import url("style.css");</style>
   <link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" />

然后我像往常一样调用脚本

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="script.js"></script>

每个按钮都有:

    <a class="colorbox colorred" href="?theme=red" title="Red Theme"><img src="red.png" width="x" height="x" /></a>

下面是script.js代码:

    google.load("jquery", "1.3.1");
    google.setOnLoadCallback(function()
    {
// Color changer
$(".colorblack").click(function(){
    $("link").attr("href", "black.css");
    return false;
});
$(".colorred").click(function(){
    $("link").attr("href", "red.css");
    return false;
});
$(".colorwhite").click(function(){
    $("link").attr("href", "white.css");
    return false;
});
$(".coloryellow").click(function(){
    $("link").attr("href", "yellow.css");
    return false;
});
    });

好的。我对此做了更多的研究和实验，我想我找到了解决办法。首先是一些背景信息。据我所知，闪烁的问题是css没有完全加载。一般来说，只要不是主要的性能问题，您就希望加载在页面加载时完成。你可以根据需要动态加载它们，但这会导致我们这里遇到的问题，你试图使用尚未加载的数据。我能看到的最好的解决方案是在开始时加载所有的css，并动态地改变它们的优先级。我已经测试过了，它确实有效。对于层叠样式表(css)，名称的层叠部分意味着，当您加载一个样式表然后加载另一个样式表时，最后一个样式表具有优先级。我的第一个想法是简单地添加另一个样式表来覆盖前一个样式表。这样，当它加载时，旧的样式表仍然被使用，不会有闪烁。我遇到的唯一问题是链接样式表的优先级是颠倒的，这意味着您必须覆盖第一个而不是最后一个。下面是说明这个过程的代码:

<html>
<head>
<link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" />
<link href="black.css" rel="stylesheet" type="text/css" title="Black Theme" />
<link href="white.css" rel="stylesheet" type="text/css" title="White Theme" />
<link href="red.css" rel="stylesheet" type="text/css" title="Red Theme" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
  $(".colorblack").click(function(){
    $("link:first").attr("href", "black.css");
    return false;
  });
  $(".colorred").click(function(){
    $("link:first").attr("href", "red.css");
    return false;
  });
  $(".colorwhite").click(function(){
    $("link:first").attr("href", "white.css");
    return false;
  });
  $(".coloryellow").click(function(){
    $("link:first").attr("href", "yellow.css");
    return false;
  });
});
</script>
</head>
<body>
 <a class="colorbox colorred" href="?theme=red" title="Red Theme">red theme</a></br>
 <a class="colorbox colorblack" href="?theme=black" title="Black Theme">black theme</a></br>
 <a class="colorbox colorwhite" href="?theme=white" title="White Theme">white theme</a></br>
 <a class="colorbox coloryellow" href="?theme=yellow" title="Yellow Theme">yellow theme</a></br>
</body>
</html>

css非常简单。例如

body
{
  background-color:yellow;
}

这适用于Chrome和FF，但它不工作在IE或Opera。在这两种情况下，替换链接节点似乎不能很好地工作。但基本上，你就是这么做的。:)

您可以尝试使用两个链接元素。默认值放在头部的首位，用户首选项放在第二位。由于样式表层叠，第一个样式表将被覆盖。然后，您可以将第一个样式表替换为相同的样式表，以便用户可以根据需要进行另一个选择。

相关内容

最新更新

热门标签：