title: Jquery Style switcher - How to remove style flickering while a .css loads?
body: <p>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 -</p>
  
  <p>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! </p>
  
  <p>Thanks for reading!</p>
  
  <p>I have this code to switch styles on my site: </p>
  
  <p>HTML to call main style and main color</p>
  
  <pre><code>   &lt;style type="text/css"&gt; @import url("style.css");&lt;/style&gt;
     &lt;link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" /&gt;
  </code></pre>
  
  <p>Then i call the scripts as usual</p>
  
  <pre><code>    &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Each button has this: </p>
  
  <pre><code>    &lt;a class="colorbox colorred" href="?theme=red" title="Red Theme"&gt;&lt;img src="red.png" width="x" height="x" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Now here is the script.js code: </p>
  
  <pre><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;
  });
  
      });
  </code></pre>