Question

I have a site with 2 stylesheets, one for day and one for night reading. I have an image with an onclick 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 rel="stylesheet" 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.

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

Answer 1

Have you tried switching the order of setting the attributes? Like set the rel attribute of the stylesheet you are switching to first and then set the rel attribute of the stylesheet you are switching away from after?

Set both rel attributes to stylesheet in the HTML, and when the page loads use javascript to change one of them to alternative stylesheet.