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

发布于 2024-11-25 06:06:46 字数 1375 浏览 2 评论 0原文

我有一个简单的代码可以使用简单的 CLI 更改样式。它工作正常，但它有一种我想防止的样式闪烁 - 一个被禁用和另一个未完全加载之间有一点超时 -

另外我想添加一个 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;
});

    });

原文

I have a simple code to change styles with a simple clic. It works fine but it has a style flickering that i would like to prevent - a little timeout between one is disabled and other not totaly loaded -

Also i would like to add a cookie so user won't have to select their prefered style everytime he/she enters. But honestly i'm not sure how to do it as i'm new with jquery. So if someone is able to help me that will be great!

Thanks for reading!

I have this code to switch styles on my site:

HTML to call main style and main color

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

Then i call the scripts as usual

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

Each button has this:

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

Now here is the script.js code:

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

    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离旧人 2024-12-02 06:06:46

好的。我对此做了更多的研究和实验，我想我已经找到了解决方案。首先是一些背景信息。据我所知，闪烁的问题是 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 中不起作用。替换链接节点似乎在这两个节点上效果不佳。但基本上，你就是这样做的。 :)

Ok. I've done a little more research and experimentation into this, and I think I've found a solution. First some background info. As far as I can tell, the problem we have with the flickering is the css not being fully loaded. Generally you want the loading to be done at page load as long as it's not a major performance issue. You could load them dynamically as needed but that leads to this problem we have here, where you are trying to use data that is not yet loaded. The best solution that I can see is to load all of the css at the start and change their precedence dynamically. I have tested this and it does work. with cascading style sheets (css), the cascading part of the name means that when you load a style sheet and then load another one, the last one takes overriding precedence. My first thought was to simply add another style sheet that would override the previous one. That way, as it loaded, the old style sheet was still being used and there would be no flicker. The only problem I ran into was that linked style sheet precedence is reversed, meaning you have to override the first one and not the last one. Here is the code illustrating this process:

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

And the css is pretty simple. e.g.

body
{
  background-color:yellow;
}

This works in Chrome and FF, but it does not work in IE or Opera. Replacing link nodes seems to not work as well in those two. But basically, that's how you do it. :)

回复收藏 0 原文