用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毫秒以上的時間），以便用戶知道正在發生的事情，應該稍等片刻。