Javascript 加载屏幕 - window.onload 不起作用

Question

I'm trying to make a loading screen for my project. I need the javascript to remove the CSS property "Display: none" from (page) I can't figure out why my code doesn't work.

The Problem was:

window.onload is not a function and i should use something like "window.onload = loader;" instead. Afterwards I should make it "display:inline"

Worked perfectly!

 window.onload(loader) function loader(){ document.getElementById("page").style.removeProperty("display"); }

 #page{ display: none; } /* Loading */ #loading{ width: 100%; height:100vh; background-color: #428BCA; } .loading_container{ margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #spin { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loading h1{ color: #FFF; margin-left:10px; }

 <div id="page"> Content! </div> <div id="loading"> <div class="loading_container"> <div id="spin"></div> <h1>Loading...</h1> </div> </div>

Answer 1

window.onload is not a function.

You need to assign it to the function as follows.

window.onload = loader;

I'm assuming you want the loading animation to disappear upon successfully loading. The snippet in the loader() function emulates loading by waiting 3 seconds.

I set the css attributes differently. You initialise #page to display: none , so I simply set it to the default value inline.

document.getElementById("page").style.display = "inline";

I would favor this method instead of removing the attribute entirely and letting it default. This way you can specify a particular display value of your desire. Ie inline-block, block etc.

 window.onload = loader; function loader(){ setTimeout(function() { document.getElementById("loading").style.visibility = "hidden"; document.getElementById("page").style.display = "inline"; }, 3000); }

 #page{ display: none; } /* Loading */ #loading{ width: 100%; height:100vh; background-color: #428BCA; } .loading_container{ margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #spin { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loading h1{ color: #FFF; margin-left:10px; }

 <div id="page"> Content! </div> <div id="loading"> <div class="loading_container"> <div id="spin"></div> <h1>Loading...</h1> </div> </div>

Answer 2

If I understand you correctly, you want to show the content of the page with the function 'loader', correct? If so, you can't try to get rid of the display property, because it needs to be set. You want to change it from none to initial or inline .

Answer 3

First of all window.onload is not a function. It's a property. You can simply assign your callback to it. removeProperty("display"); is also wrong. It should be style.display = "none"

 window.onload = loader; function loader() { document.getElementById("page").style.display = "none"; } loader();

 #page { display: none; } /* Loading */ #loading { width: 100%; height: 100vh; background-color: #428BCA; } .loading_container { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #spin { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loading h1 { color: #FFF; margin-left: 10px; }

 <div id="page"> Content! </div> <div id="loading"> <div class="loading_container"> <div id="spin"></div> <h1>Loading...</h1> </div> </div>