Question

我正在使用JS CSS切换器，效果非常好。但是，如果它更有效地工作，我会很高兴。在网站上打开一个新页面时，默认的css样式通常会在cookie重新应用所选CSS样式之前完全闪烁。

e.g。画布样式是默认样式，这在首次访问网站时打开，用户选择公司样式，他们在网站中打开另一个页面 - 画布样式显示一瞬间，然后企业样式加载它。在较旧的计算机上更糟糕，但在我的主计算机上，这种情况在Firefox上并不常见，尽管在其他浏览器上，尤其是Chrome，它非常引人注目。有没有人有专业知识来更新下面的工作，通过调整说，首先检查cookie，然后如果没有cookie，应用默认样式，而不是看似同时应用默认样式？

我正在使用的代码如下：

在html头中：

    <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

Answer 1

我会做服务器端...

无论如何，当你做

时

$(function()
{ 
});

jQuery一直等到DOM完全加载才能执行该函数。

因此，您应该将javascript放在<link />以外的$(function(){});部分下方。这将在浏览器解析它并在页面完全加载之前立即生成脚本。（它必须低于元素，因为它们必须加载）

Answer 2

我认为你可能希望在DOM准备好之前运行你的代码。也许你可以立即运行它而不是使用$（function（）{...}），因为jQuery会等到页面加载执行任何内容（因此闪烁）。

也许这可能会给人以洞察力。 http://forum.jquery.com/topic/use-jquery-before-the-dom-is-ready-12-1-2010

调整链接无法正常工作的步骤：

>>> $('link[@rel*=style][title]') --> seems to show your styles are there
[..., <link rel="alternate stylesheet" type="text/css" href="/css/corporate.css " title="corporate">, ...]

>>> $.stylesheetSwitch('corporate') --> seems to work

唯一的问题是链接没有绑定到onclick;等等......你的意思是this.getAttribute（'title'）？如上所示，rel =“alternate stylesheet”可能不是您打算用作唯一主题标识符。

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

2 个答案: