title: switch stylesheet flicker
body: <p>I have a site with 2 stylesheets, one for day and one for night reading. I have an image with an <code>onclick</code> event to call a function to change the stylesheet. The problem is, for new visitors, when they first click the button, the page goes to completely unstyled (i.e. no stylesheet) just for half a second, then the new one kicks in. I know the reason this is happening is that I remove the <code>rel="stylesheet"</code> of the current sheet before adding it to the new one. Is there any way I can improve the function so that there is no brief delay, even for new visitors? Thanks.</p>
  
  <pre><code>function changeStyleSheet() {
      var a = document.getElementById('stylesheet1');
      var b = document.getElementById('stylesheet2');
      var now1 = $(a).attr('rel');
      var now2 = $(b).attr('rel');
      if (now1 == 'stylesheet') {
          a.setAttribute('rel', 'alt-stylesheet');
          b.setAttribute('rel', 'stylesheet');
      } else {
          b.setAttribute('rel', 'alt-stylesheet');
          a.setAttribute('rel', 'stylesheet');
      }
  };
  </code></pre>