I have a question about loading a JavaScript that changes the CSS based on the time of day or date.

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.

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?

Here is the Js Code.

function TimeOfDaySiteChange() {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        night();
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        dusk();
    } else if (n > 19) {
        // If time is 8PM 
        night();
    } else if (n > 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;

I've also tried it without window.onload

I have a question about loading a JavaScript that changes the CSS based on the time of day or date.

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.

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?

Here is the Js Code.

function TimeOfDaySiteChange() {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        night();
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        dusk();
    } else if (n > 19) {
        // If time is 8PM 
        night();
    } else if (n > 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;

I've also tried it without window.onload

• javascript
• jquery
• dom

• have you tried placing your code in a document ready function? – martincarlin87 Commented Apr 29, 2013 at 15:00
• 1 You don't need to add a class to #header_masthead, just do body.sunrise_bg #header_masthead {} – powerbuoy Commented Apr 29, 2013 at 15:01
• Regarding the flash; before your JS has loaded, run and eventually added a class the browser will show the default page. I'd add the class on the server side instead. – powerbuoy Commented Apr 29, 2013 at 15:02
• @powerbuoy Why would you do that? The server knows nothing about the client's time – Ian Commented Apr 29, 2013 at 15:04
• Oh, that's true. Didn't think about that. But the reason I'd do that should hopefully be obvious (had it worked). I'd consider setting a cookie with JS that can be used on the server for subsequent loads. – powerbuoy Commented Apr 29, 2013 at 15:11

2 Answers 2

Your best bet would be to put this as the very first thing in your body and remove the window.onload. You would need to tweak your css slightly so that you only change the class on the body:

.sunrise_bg #header_masthead{

instead of having a class on the #header_masthead.

Then run TimeOfDaySiteChange() as the very first thing in your body.

By using onload you are waiting for the entire page to load before applying your class.

Alternatively, if you're using html5, you could change your code to add the class to the html element and place your javascript early in the head of your document. This may be slightly faster.

Is there away to prevent the script from loading everytime the user goes from page to page?

In short, no. Your current implementation dynamically adds classes (based on the time of day) with Javascript. You need the Javascript to run on every page in order for the classes to be added.

You can use the method as suggested by James https://stackoverflow./a/16281934/2174104 to minimise the time it takes for the function to run, but there is no way to load the background colour once and keep it if your site uses separate html documents.