Question

我有一个改变背景并使用jquery cookie脚本设置cookie的切换器。它看起来像：

$(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或内容被缓存，页面将在显示烹饪样式之前闪烁defualt白色背景。有什么更好的方法来编写代码，以便在早期的dom中应用类，而不必等待所有脚本？

Answer 1

通过使用jQuery，您依赖于从缓存或Web服务器加载的脚本。不幸的是，当一切都被加载时，你会有一点闪光。

另外，您可以使用NORMAL JavaScript（不依赖于库或框架）打开页面的BODY标记之后应用以下内容：

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

...然后只需将正文的“显示”CSS属性设置回“阻止”，或者在jQuery脚本的最末端设置你喜欢的任何内容。

Answer 2

这是常见的闪存标记问题。

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

在脚本运行之前考虑使用“加载”图形或启动画面（如果它需要超过100-200ms），这样用户就会知道某些事情正在发生并且应该等待一段时间。

使用cookie定义类的最佳方法

2 个答案: