Javascript 从 localStorage 加载图像

Question

I have a problem with the javascript code below, it works perfectly, the image loads but when the page load up the first image that appears is the first one (.test) and it changes to the one that I set in 1 second. I don't know how to do it to load the image before the page loads fully, I don't know why snippet doesn't work since the code work on my site:

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

Check errors in the inspector by right-clicking. You should get this:

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

You can just simply think that localStorage won't work on StackOverflow, but it really doesn't matter whether it works here as long as it works on your site.

---

Additionally, you should improve your code like this:

 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>