Question

我有一个简单的代码，用简单的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;
});

    });

Answer 1

您可以尝试的一件事是拥有两个链接元素。默认值首先放在头部，用户首选项放置一秒。由于样式表级联，第一个将被覆盖。然后你可以用相同的样式表替换第一个样式表，这样用户可以根据自己的需要进行另一个选择。

Answer 2

确定。我已经对此做了一些研究和实验，我想我找到了一个解决方案。首先是一些背景信息。据我所知，闪烁的问题是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非常简单。 e.g。

body
{
  background-color:yellow;
}

这适用于Chrome和FF，但在IE或Opera中无效。替换链接节点似乎在这两者中不起作用。但基本上，你就是这样做的。：）

Jquery Style切换器 - 如何在.css加载时删除样式闪烁？

2 个答案: