Лучший способ определить класс с помощью cookie

Question

У меня есть переключатель, который меняет фон и устанавливает cookie, используя скрипт jquery 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 не будет загружен или содержимое не будет кэшировано, страница будет мигать по умолчанию на белом фоне, прежде чем отобразить готовый стиль.,Что может быть лучше, чтобы кодировать это так, чтобы класс применялся ранее в DOM и не должен ждать всех сценариев?

Answer 1

Это распространенная проблема с разметкой flash-of-unstyled-разметки.

Вы можете поместить всю страницу в рамку, отметив ее как «display: none» или «visibility: collapse», а затем отобразитьэто в конце вашего сценария.Страница будет просто фоном браузера по умолчанию, пока ваш скрипт не завершится, что может занять некоторое время.

Подумайте о том, чтобы иметь «загрузочную» графику или заставку перед запуском вашего скрипта (если это занимает более 100-200 мс), чтобы пользователь знал, что что-то происходит, и должен немного подождать.

Answer 2

Используя jQuery, вы зависите от сценариев, загружаемых из кэша или с веб-сервера.К сожалению, у вас будет такая вспышка, пока все загружается.

АЛЬТЕРНАТИВНО, однако вы можете применить что-то вроде следующего сразу после открытия тега BODY вашей страницы с помощью НОРМАЛЬНОГО JavaScript (без зависимости отбиблиотека или фреймворк):

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

... затем просто установите свойство CSS «display» тела обратно на «block», или там, где вы предпочитаете, находится в самом конце вашего скрипта jQuery.