CSS切换器-寻找更无缝的实现

我正在使用一个JS CSS切换器，效果很好，真的很出色。然而，如果它能更无缝地工作，我会很高兴。在网站上打开一个新页面时，默认的css样式通常会短暂地闪烁，然后cookie会重新应用所选择的css样式。

。画布样式是默认样式，它在第一次访问网站时打开，用户选择公司样式，他们打开网站中的另一个页面-画布样式显示一瞬间，然后公司样式加载到它上面。在旧电脑上情况更糟，但在我的主电脑上，Firefox不经常出现这种情况，尽管在其他浏览器上，尤其是Chrome，这种情况非常明显。有没有人有专业知识来更新下面的工作方式，比如，首先检查cookie，如果没有cookie，则应用默认样式，而不是同时应用默认样式?

我使用的代码如下:

:

    <script type="text/javascript">
$(function()
    {
        // Call stylesheet init so that all stylesheet changing functions 
        // will work.
        $.stylesheetInit();
        // This code loops through the stylesheets when you click the link with 
        // an ID of "toggler" below.
        $('#toggler').bind(
            'click',
            function(e)
            {
                $.switcher();
                return false;
            }
        );
        // When one of the styleswitch links is clicked then switch the stylesheet to
        // the one matching the value of that links rel attribute.
        $('.styleswitch').bind(
            'click',
            function(e)
            {
                $.stylesheetSwitch(this.getAttribute('rel'));
                return false;
            }
        );
    }
);
</script>



<link rel="stylesheet" type="text/css" href="/css/canvas.css " title="canvas">
<link rel="alternate stylesheet" type="text/css" href="/css/corporate.css " title="corporate">
<link rel="alternate stylesheet" type="text/css" href="/css/earth.css " title="earth">
<link rel="alternate stylesheet" type="text/css" href="/css/space-and-stars.css " title="space-and-stars">
<link rel="alternate stylesheet" type="text/css" href="/css/under-the-sea.css " title="under-the-sea">
<link rel="alternate stylesheet" type="text/css" href="/css/classical.css " title="classical">
<link rel="alternate stylesheet" type="text/css" href="/css/creative.css " title="creative">

JS

(function($)
    {
        // Local vars for toggle
        var availableStylesheets = [];
        var activeStylesheetIndex = 0;
        // To loop through available stylesheets
        $.switcher = function()
        {
            activeStylesheetIndex ++;
            activeStylesheetIndex %= availableStylesheets.length;
            $.stylesheetSwitch(availableStylesheets[activeStylesheetIndex]);
        };
        // To switch to a specific named stylesheet
        $.stylesheetSwitch = function(styleName)
        {
            $('link[@rel*=style][title]').each(
                function(i) 
                {
                    this.disabled = true;
                    if (this.getAttribute('title') == styleName) {
                        this.disabled = false;
                        activeStylesheetIndex = i;
                    }
                }
            );
            createCookie('style', styleName, 365);
        };
        // To initialise the stylesheet with it's 
        $.stylesheetInit = function()
        {
            $('link[rel*=style][title]').each(
                function(i) 
                {
                    availableStylesheets.push(this.getAttribute('title'));
                }
            );
            var c = readCookie('style');
            if (c) {
                $.stylesheetSwitch(c);
            }
        };
    }
)(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++)
    {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name)
{
    createCookie(name,"",-1);
}
// /cookie functions