Как установить цвет фона тела с помощью JS, до полной загрузки страницы?

Я использую этот скрипт, чтобы позволить пользователю изменять цвет фона...

document.onclick = function SetFavColor(e) {
    if (e.target.className == 'AvcGbtn') {
        var favColor = e.target.style.backgroundColor;

        localStorage.setItem('color', favColor);
        document.body.style.backgroundColor = favColor;
        console.log(favColor);
    }
};

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var favColor = document.body.style.backgroundColor;
    var color = localStorage.getItem('color');

    if (color === '') {
        document.body.style.backgroundColor = favColor;
    } else {
      document.body.style.backgroundColor = color;
    }
});

CSS: 

body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}

HTML: 

<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>      
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span>

Это работает, но проблема в том, что он показывает выбранный цвет после полной загрузки страницы. Я хочу показать цвет, который пользователь выбирает до загрузки страницы.

Пример: цвет фона белый, и пользователь выбирает красный. Сценарий показывает белый цвет фона перед выделением, а после того, как пользователь выбирает красный, сценарий меняет цвет фона на красный. Как я могу это сделать?

Это именно то, что я пытаюсь сделать с Javascript, пример CSS

body:before {
background-color: red;
}

ОТВЕТЫ

Ответ 1

Сначала вы можете упростить логику установки цвета, как показано ниже:

document.addEventListener('DOMContentLoaded', function GetFavColor() {
    var color = localStorage.getItem('color');
    if (color != '') {
        document.body.style.backgroundColor = color;
    }
});

Изменять цвет нужно только в том случае, если что-то хранится локально, если не будет использоваться цвет по умолчанию, указанный в CSS.

Чтобы получить быстрое изменение, вы можете избавиться от любого события и поместить свой скрипт в тег head, и вместо нацеливания на элемент body вы можете нацелиться на элемент html, и вы получите тот же результат из-за фоновое распространение:

<!DOCTYPE html>
<html>
<head>
  <!-- coloration -->
  <style>html {background:red} /*default color*/</style>
  <script>
    var color ="blue" /*localStorage.getItem('color')*/;
    if (color != '') {
      document.documentElement.style.backgroundColor = color;
    }
  </script>
  <!-- -->
</head>
<body>

</body>
</html>

Ответ 2

Вам нужно использовать другое событие onreadystatechange. Этот стреляет перед onload. Я немного поигрался с функциями и установил "оранжевый" в качестве значения по умолчанию для этого события, а другой в качестве нажатия кнопки "ВЫКЛЮЧИТЬ" кнопки, поскольку я отключил файлы cookie, которых не было в вашем коде. Заметка; если вы хотите, чтобы скрипт выполнялся так быстро, сделайте это. (красный) как вызов (зеленый) как самоисполняющийся.

Я добавил console.log чтобы вы могли видеть, что цвета меняются с красного на оранжевый и синий в зависимости от событий (происходит быстро, смотрите время записи в журнал)

(window.getColor=function (c) {
  var favColor = document.body.style.backgroundColor;
  var color = !!c ? c : "#FFFAFF"; //getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
  console.log(color);
})('green');

function setColor(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    //setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  } else {
    getColor("#DAFFFA");
  }
}
document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    //dom is ready, window.onload fires later
    getColor("orange");
  }
};
document.onclick = setColor;

window.onload = function() {
  getColor('blue');
};
getColor('red');
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}

.AvcGbtn {
  display: inline-block;
  width: 2em;
  height: 2em;
}
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>

<span class="AvcGbtn" style="background: #e8e8e8; background-size: 100% 100%;" rel="nofollow"></span>

Ответ 3

Не стоит сбрасывать со счетов удивительную мощь Javascript старой школы: эффективно используйте document.write в нужных местах, например в конце тега head.

<head>
    <link rel="stylesheet" type="text/css" href="..."/>
    <script type="text/javascript">
    (function(){
      var color = localStorage.getItem('color');
      if(typeof(color) === "string" && color != "") {
         document.write("<style type=\"text\/css\">body{background-color:" + color + ";}</style>");
      }
    }());
    </script>
</head>

Ответ 4

Вместо того, чтобы помещать свою функцию изменения цвета фона в window.onload, попробуйте поместить ее в <script> сразу после открывающего <body>:

<html>
  ...
  <body>
    <script>
      // This js code will be executed before the rest of the page is loaded
    </script>
    ...
  </body>
</html>

Ответ 5

Поскольку встроенный CSS обрабатывается ДО обработки javascript, вы пытались просто удалить цвет фона из встроенного CSS?

document.onclick = function(e) {
  if (e.target.className == 'AvcGbtn') {
    var favColor = e.target.style.backgroundColor;
    setCookie('color', favColor);
    document.body.style.backgroundColor = favColor;
    console.log(favColor);
  }
};

window.onload = function() {
  var favColor = document.body.style.backgroundColor;
  var color = getCookie('color');
  if (color === '') {
    document.body.style.backgroundColor = favColor;
  } else {
    document.body.style.backgroundColor = color;
  }
};
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  font-family: normal;
  font-style: normal;
  font-weight: normal;
  background-color: transparent;
}
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>