Как загрузить jQuery перед кодом CSS?

0

Я разрабатываю блог, в котором посетитель может изменить цвет фона, нажав на одну из 5 кнопок.

Изображение 174551

$(function(){

        //Verificando se já existe algum esquema de cor selecionado
        var esquemaCor = parseInt(getCookie("cor_de_fundo"));

        switch(esquemaCor){
            case 1:
                $('body').css('background-color','#0A0A0A');
                break;
            case 2:
                $('body').css('background-color','#766777');
                break;
            case 3:
                $('body').css('background-color','#EEE6EE');
                break;
            case 4:
                $('body').css('background-color','#9F00A9');
                break;
            case 5:
                $('body').css('background-color','#420668');
                break;
            default:
                $('body').css('background-color','#9F00A9');
        }

        $('#cor_01').click(function(){
            setCookie('cor_de_fundo', 1);
            $('body').css('background-color','#0A0A0A');
        });
        $('#cor_02').click(function(){
            setCookie('cor_de_fundo', 2);
            $('body').css('background-color','#766777');
        });
        $('#cor_03').click(function(){
            setCookie('cor_de_fundo', 3);
            $('body').css('background-color','#EEE6EE');
        });
        $('#cor_04').click(function(){
            setCookie('cor_de_fundo', 4);
            $('body').css('background-color','#9F00A9');
        });
        $('#cor_05').click(function(){
            setCookie('cor_de_fundo', 5);
            $('body').css('background-color','#420668');
        });
    });

Стандартный цвет - фиолетовый блог.

background: # 9F00A9

Когда пользователь меняет цвет фона кнопки, работает отлично. Проблема заключается в том, что он перемещается между страницами блога. Перед зарядкой выбранного цвета, например, черный цвет фона сначала загружается после фиолетового на черный. (Возьмите тестовый блог: www.obovio.com.br) Как всегда носить первый цвет, который выбрал пользователь?

Теги:

4 ответа

0
Лучший ответ

Скажите, что это ваш html

 <body>
 <script>
 $( document ).ready(function() {
     //by assigning this to a function you ensure the page has loaded and it exists before you call it too early
     backgroundColour(getCookie("cor_de_fundo"));
 });
 </script>
</body>

И это ваша новая функция: function backgroundColour (cookie) {

    //Verificando se já existe algum esquema de cor selecionado
    var esquemaCor = parseInt(cookie);
    //This way there is never a risk of auto-default unless the cookie is empty, but this is option, can probably keep using default anyway
    if(!esquemaCor) {
        $('body').css('background-color','#9F00A9');
    }
    else {
    switch(esquemaCor){
        case 1:
            $('body').css('background-color','#0A0A0A');
            break;
        case 2:
            $('body').css('background-color','#766777');
            break;
        case 3:
            $('body').css('background-color','#EEE6EE');
            break;
        case 4:
            $('body').css('background-color','#9F00A9');
            break;
        case 5:
            $('body').css('background-color','#420668');
            break;
    }

    $('#cor_01').click(function(){
        setCookie('cor_de_fundo', 1);
        $('body').css('background-color','#0A0A0A');
    });
    $('#cor_02').click(function(){
        setCookie('cor_de_fundo', 2);
        $('body').css('background-color','#766777');
    });
    $('#cor_03').click(function(){
        setCookie('cor_de_fundo', 3);
        $('body').css('background-color','#EEE6EE');
    });
    $('#cor_04').click(function(){
        setCookie('cor_de_fundo', 4);
        $('body').css('background-color','#9F00A9');
    });
    $('#cor_05').click(function(){
        setCookie('cor_de_fundo', 5);
        $('body').css('background-color','#420668');
    });
});

Изменение: изменение моего ответа, потому что я только что понял, что ваш фон установлен отдельно от фонового цвета.

Почему бы вам просто не поместить это в свой собственный тег (ниже таблицы стилей):

<script>
if (getCookie("cor_de_fundo")) {
$('body').css('background','url("http://4.bp.blogspot.com/-SZodpKgdjwk/UkCj20gd4XI/AAAAAAAADZk/tIAmBbkoecU/s1600/square_bg.png") repeat');
}
</script>

Таким образом, если cookie установлен, вы получаете свои точки, но вы теряете этот фиолетовый цвет. Так эта проблема никогда не возникает?

Похоже, ваша логика может быть неправильной.

Вы говорите: "Наденьте фиолетовый фон с точками. Если есть куки, поставьте фоновый цвет на фоне с точками.

Вместо этого, почему бы вам не сказать "если есть куки файл, помещенный в цвет фона с точками, если нет куки файла, поставьте в цвет фона фиолетовый с точками".

На данный момент вы говорите: "установите фон для URL с фиолетовым цветом, тогда, если есть cookie, измените цвет"

Поделиться
  • 0
    В jQuery $(document).ready(handler) эквивалентен $(handler) - api.jquery.com/ready
  • 0
    Спасибо за советы, но все же есть период, когда он загружается после цвета по умолчанию для пользователя цвета ... Я не хотел, чтобы он загружал цвет по умолчанию, то есть цвет хотел, чтобы пользователь был загружен первым.
1

Как и у вас, $(foo) (где foo - это функция) означает "дождитесь загрузки документа перед вызовом foo ". Если вы этого не сделаете, вы не можете гарантировать, что ваши HTMLElements существуют. Однако, если вы переместите вызов в <script> который находится после/дочернего узла узла, вы должны быть уверены, что он будет существовать к моменту запуска кода.

Например, поскольку ваша функция использует только элемент <body>, дайте ему имя foo, а затем выполните

<body>
    <script type="text/javascript">
foo();
    </script>
    <!-- rest of body contents -->
</body>

Это будет означать, что он вызывается как можно скорее, в то время, когда можно с уверенностью предположить, что он не throw ошибку.

Поделиться
  • 0
    Следуйте вашему предложению, но это не решило проблему. Страница по-прежнему загружает сначала цвет фона на фиолетовый, а затем загружает цвет фона, выбранный пользователем. Но есть предложения? Спасибо ...
0

Вы пытались использовать localstorage для сохранения цвета фона

$(function(){
 if(localStorage.bgcolor==undefined)
    localStorage.bgcolor="white" //default color that appears first time

 $('body').css('background-color',localStorage.bgcolor);

   $('#cor_01').click(function(){
     localStorage.bgcolor = "#0A0A0A";
     $('body').css('background-color',localStorage.bgcolor);
   });
   $('#cor_02').click(function(){
     localStorage.bgcolor = "#766777"
     $('body').css('background-color',localStorage.bgcolor);
   });
   // similar code for other buttons
});

Локальное хранилище HTML5

Поделиться
0

Похоже, вы хотите историю api, чтобы предотвратить загрузку всей страницы снова? http://diveintohtml5.info/history.html

Эти примеры не требуют перезагрузки страницы: http://diveintohtml5.info/examples/history/casey.html

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню