我使用这个脚本来允许用户更改背景颜色。。。
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;
}
首先，您可以简化设置颜色的逻辑，如下所示：
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>代码片段正在更改代码，您需要在本地进行测试以获得更准确的结果
您需要使用不同的事件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>不要忽视老式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>
与其将背景颜色更改功能放在window.onload上，不如尝试在打开<body>标签后将其放在<script>标签中：
<html>
...
<body>
<script>
// This js code will be executed before the rest of the page is loaded
</script>
...
</body>
</html>
由于内联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>有时所需要的只是使用setTimeout将页面加载分成两部分。示例：
<!DOCTYPE html>
<html>
<head>
<script>
//Load page part 1
//setTimeout allows the page to be rendered immediately
window.onload = function Load1(){
Load2Timeout = setTimeout(Load2,1);
}
//Load page part 2
//This loop is just simulating a long page load
var f = ""
function Load2() {
for (var i = 1; i < 50000; i++) {
f += "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>"
};
document.body.innerHTML = f
}
</script>
<style>
body {background-color:Wheat}
</style>
</head>
<body>
Loading page. Please wait...
</body>
</html>