title: Change CSS based on time of date or time of day
body: <p>I have a question about loading a JavaScript that changes the CSS based on the time of day or date. </p>
  
  <p>Question: How can I cache the images so that they do not load from page to page? The Script works fine and adds the class to the body and header based on the time of day. However, when a user clicks the next page of the website, it reloads the same CSS Class and causes the site to flash to white before loading the CSS.</p>
  
  <p>I've placed the script at the bottom of the page and in the header. Yet it still flashes on every page that loads the script. Is there away to prevent the script from loading everytime the user goes from page to page?</p>
  
  <p>Here is the Js Code. </p>
  
  <pre><code>function TimeOfDaySiteChange() {
      var d = new Date();
      var n = d.getHours();
  
      if (n &lt; 5) {
          // midnight
          night();
      } else if (n &gt; 16 &amp;&amp; n &lt; 20) {
          // If time is between 5PM &amp;ndash; 8PM sunset theme to 'body'
          dusk();
      } else if (n &gt; 19) {
          // If time is 8PM 
          night();
      } else if (n &gt; 8) {
          // If time is 9AM
          daytime();
      } else {
          // Else use 'dawn' theme
          dawn();
      }
  }
  
  function dawn() {
      jQuery('body').addClass('sunrise_bg');
      jQuery('#header_masthead').addClass('sunrise_masthead_bg');
  }
  
  function daytime() {
      jQuery('body').addClass('day_bg');
      jQuery('#header_masthead').addClass('day_masthead_bg');
  }
  
  function dusk() {
      jQuery('body').addClass('sunset_bg');
      jQuery('#header_masthead').addClass('sunset_masthead_bg');
  }
  
  function night() {
      jQuery('body').addClass('night_bg');
      jQuery('#header_masthead').addClass('night_masthead_bg');
  }
  
  function init() {
      TimeOfDaySiteChange();
  }
  
  window.onload = init;
  </code></pre>
  
  <p>I've also tried it without <code>window.onload</code></p>