用cookie定义类的最佳方法

Question

我有一个切换器，它正在更改背景并使用jquery cookie脚本设置co​​okie。 看起来像：

$(document).ready(function(){
var colors = $.cookie('colors');

    $(".box_2f2").click(function(){
        $('body').removeClass('c000 cfff c2f2');
        $('body').addClass('c2f2');
        $.cookie('colors','middleGrey');
        return false;
        });
    $(".box_fff").click(function(){
        $('body').removeClass('c000 cfff c2f2');
        $('body').addClass('cfff');
        $.cookie('colors','white');
        return false;
        });
    $(".box_000").click(function(){
        $('body').removeClass('c000 cfff c2f2');
        $('body').addClass('c000');
        $.cookie('colors','black');
        return false;
        });
    if(colors == 'middleGrey')
    {
    $('body').addClass('c2f2');
    }
    if (colors == 'white')
    {
    $('body').addClass('cfff');
    }
    if(colors == 'black')
    {
    $('body').addClass('c000');
    }
    });

问题在于，直到加载了该段javascript或内容被缓存后，该类才被设置，该页面将在显示cookie样式之前闪烁默认的白色背景。 有什么更好的编码方法，以便将该类在dom中更早地应用并且不必等待所有脚本？

Answer 1

通过使用jQuery，您依赖于要从缓存或Web服务器加载的脚本。 不幸的是，在加载所有内容时，您会一闪而过。

但是，至少可以在使用NORMAL JavaScript打开页面的BODY标签之后应用以下内容（而不依赖于库或框架）：

<script type="text/javascript">
    document.body.style["display"] = "none";
</script>

...然后只需将主体的“ display” CSS属性设置回“ block”或您的jQuery脚本结尾处的首选项即可。

Answer 2

这是常见的无样式标记问题。

您可以将整个页面放在div中，将其标记为“ display：none”或“ visibility：collapse”，然后在脚本末尾显示。 在脚本完成之前，该页面只是默认的浏览器背景，这可能需要一些时间。

考虑在脚本运行之前准备一个“正在加载”图形或启动屏幕（如果需要100-200毫秒以上的时间），以便用户知道正在发生的事情，应该稍等片刻。