从localStorage加载Javascript映像

Question

我对下面的javascript代码有问题，它工作得很好，加载了图像，但当页面加载时，出现的第一个图像是第一个图像(.test(，它会变为我在1秒内设置的图像。我不知道如何在页面完全加载之前加载图像，我不知道为什么代码片段不起作用，因为代码在我的网站上起作用：

$(document).ready(function() {
const bgimg = localStorage.getItem("backgrounddetest");
document.getElementById("header").style.backgroundImage = bgimg;
const bgposy = localStorage.getItem("backgroundpositiony");
document.getElementById("header").style.backgroundPosition = bgposy;
const bgsize = localStorage.getItem("backgroundsize");
document.getElementById("header").style.backgroundSize = bgsize;
});

$('.test').click(function() {
$('#header').css("background", "url(https://i.imgur.com/oKe8JBR.png)");
$('#header').css("background-position-y", "13.2%");
localStorage.setItem("backgrounddetest", "url(https://i.imgur.com/oKe8JBR.png)");
localStorage.setItem("backgroundpositiony", "0 13.2%");
localStorage.setItem("backgroundsize", "none");
});

$('.test2').click(function() {
$('#header').css("background", "url(https://i.imgur.com/UZhKDMu.png)");
$('#header').css("background-position-y", "40%");
$('#header').css("background-size", "cover");
localStorage.setItem("backgrounddetest", "url(https://i.imgur.com/UZhKDMu.png)");
localStorage.setItem("backgroundpositiony", "0 40%");
localStorage.setItem("backgroundsize", "cover");
});

$('.test3').click(function() {
$('#header').css("background", "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)");
localStorage.setItem("backgrounddetest", "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)");
});

#header {
background-image: url('https://i.imgur.com/oKe8JBR.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 500px;
height: 500px;
}
.test {
background: url('https://i.imgur.com/oKe8JBR.png');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}
.test2 {
background: url('https://i.imgur.com/UZhKDMu.png');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}
.test3 {
background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<header id="header"></header>
<button class="test"></button>
<button class="test2"></button>
<button class="test3"></button>

Answer 1

右键单击以检查检查器中的错误。你应该得到这个：

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

你可以简单地认为localStorage在StackOverflow上不起作用，但它是否在这里起作用并不重要，只要它在你的网站上起作用。

---

此外，您应该像这样改进您的代码：

const properties = [
{
'background-image': 'url(https://i.imgur.com/oKe8JBR.png)',
'background-position': '0 13.2%',
'background-size': '',
},
{
'background-image': 'url(https://i.imgur.com/UZhKDMu.png)',
'background-position': '0 40%',
'background-size': 'cover',
},
{
'background-image': 'url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)',
'background-position': '',
'background-size': '',
}
];
$(function() {
// $('#header').css(properties[~~localStorage.getItem('index')]);
$('#header').css(properties[0]);
$('#buttons button').css('background-image', i => properties[i]['background-image']).click(function() {
const index = $(this).index();
$('#header').css(properties[index]);
// localStorage.setItem('index', index);
});
});

#header {
width: 500px;
height: 500px;
margin-bottom: 4px;
}
#buttons button {
border: 0;
padding: 37px;
background-size: cover;
padding-left: 70px;
cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<header id="header"></header>
<div id="buttons">
<button class="test1"></button>
<button class="test2"></button>
<button class="test3"></button>
</div>