Question

大家。我使用cookie来保存我的网站颜色样式。用户可以实时更改颜色，并将其保存到他的cookie中。在他选择之前，我设置了默认的css颜色样式（my.css）

.color-changing{
    background-color: #43A047;
}

当你工作时，你可以用jquery选择颜色，

var panel_theme = $(".color-changing");
    if ($.cookie('background-color')) {
        panel_theme.css("background-color", $.cookie('background-color'));   
    }
    $("#greenColor").click(function () {
        panel_theme.css('background-color', '#43A047');
        $.removeCookie('background-color');
        $.cookie('background-color', '#43A047', {expires: 1, path: '/'});
    });
    $("#redColor").click(function () {
        panel_theme.css('background-color', '#d32f2f');
        $.removeCookie('background-color');
        $.cookie('background-color', '#d32f2f', {expires: 1, path: '/'});
    });

问题在于，当您选择与默认颜色不同的颜色时，每次重新加载页面时，您都会看到从默认颜色中选择的非常快的闪烁。我怎么能避免这个？

Answer 1

我的建议是首先使用localStorage而不是cookie。保存为服务器发出的每个请求发送的cookie有效负载。

然后将实际的css声明保存为样式标记，以便在html完成加载之前将其写入头部。这将防止任何闪烁，因为在呈现html时样式已经存在

关闭<head>之前的类似内容：

<script>
var theme_style = localStorage && localStorage.getItem('theme_style');
if(theme_style){
   document.write(theme_style);
}
</script>

然后设置样式：

function updateUserStyle(color){
    // create style tag
    var style = '<style id="user_style">.color-changing{background-color: '+color + ';}</style>';
    // see if user style tag already exists and replace
    var $currUserStyle =$('#user_style'); 
    if($currUserStyle.length){
       $currUserStyle.replaceWith(style); 
    }else{
        // if didn't exist add to head
        $('head').append(style);
    }
    // store active style
    localStorage.setItem('theme_style', style);

}

用法

$("#redColor").click(function () {
    updateUserStyle('#d32f2f');
});

在cookie中保存网站样式

1 个答案: