How to set body background color with JS, before the page fully loads?

First you can simplify your logic of setting the color like below:

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

You only need to change the color if there is something stored locally, if not the default color specified in the CSS will be used automatically.

In order to have a fast change you can get rid of any event and put your script within the head tag and instead of targeting the body element you can target the html one and you will have the same result due to background propagation: 

<!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>

The snippet is changing the code, you need to test locally for more accurate results.


Don't dismiss the awesome power of old-school Javascript: use document.write effectively in the right places, such as just at the end of the 'head' tag.

<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>

You need to use a different event onreadystatechange. This one fires before the onload. I played around a bit with the functions and set 'orange' as the default for this event and another as the click OFF the buttons as I disabled the cookie stuff that was not in your code. Note; if you want if as fast as the script can run it, do that. (red) as a call (green) as self executing.

I added a console.log so you could see that the colors do change from red to orange to blue based on events (happens fast, see the log times)

(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>

Tags:

Javascript

Html

Css

Jquery

Recent Posts