从 localStorage 加载 Javascript 图像

Question

我对下面的 javascript 代码有问题，它运行良好，图像加载，但是当页面加载时出现的第一个图像是第一个图像 (.test)，它会更改为我在 1 中设置的图像第二。我不知道如何在页面完全加载之前加载图像，我不知道为什么 sn-p 不起作用，因为代码在我的网站上工作：

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