这有点难以解释，所以我会尽我所能
因此，当HTML页面加载时，我希望有一个很酷的加载屏幕。完成加载后，我希望清除加载屏幕并显示HTML文档。
基本上，我想要这个：
CSS：
/* Absolute Center CSS Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML：
<div class="loading">Loading…</div>
在页面加载时发生。当页面加载时，它被清除，并显示HTML文档的其余部分。 （我正在制作一个学分系统，而学分加载我只是真的需要它说它加载，人们抱怨他们不能点击任何东西，我必须告诉他们所有这些＆＃39;只是加载）
我希望尽可能远离Ajax，因为我想学习Javascript。
答案 0 :(得分：49)
你可以等到身体准备好了：
function onReady(callback) {
var intervalId = window.setInterval(function() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalId);
callback.call(this);
}
}, 1000);
}
function setVisible(selector, visible) {
document.querySelector(selector).style.display = visible ? 'block' : 'none';
}
onReady(function() {
setVisible('.page', true);
setVisible('#loading', false);
});body {
background: #FFF url("https://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: 'Alex Brush', cursive !important;
}
.page { display: none; padding: 0 0.5em; }
.page h1 { font-size: 2em; line-height: 1em; margin-top: 1.1em; font-weight: bold; }
.page p { font-size: 1.5em; line-height: 1.275em; margin-top: 0.15em; }
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("https://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
<div class="page">
<h1>The standard Lorem Ipsum passage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>
这是演示此技术的JSFiddle。
答案 1 :(得分：5)
在加载脚本的开头，只需制作你的
通过css [display:block;]可见，并通过css [display:none;]隐藏页面的其余部分。
加载完成后，只需使用相同的技术使加载不可见并再次显示页面。您可以使用document.getElementById（）来选择要更改显示的div。
编辑：这就是它的样子。当身体完成加载时，它将调用javascript函数，该函数将改变不同元素的显示值。默认情况下，您的样式是让页面看不到加载可见。
<head>
<style>
#page{
diplay:none;
}
#laoding{
display:block;
}
</style>
<script>
function myFunction()
{
document.getElementById("page").style.display = "block";
document.getElementById("loading").style.diplay = "none";
}
</script>
</head>
<body onload="myFunction()">
<div id="page">
</div>
<div id="loading">
</div>
</body>
答案 2 :(得分：2)
进一步构建您可能使用或不使用的ajax部分（来自评论）
加载另一个页面并将其替换为当前页面的简单方法是：
<script>
$(document).ready( function() {
$.ajax({
type: 'get',
url: 'http://pageToLoad.from',
success: function(response) {
// response = data which has been received and passed on to the 'success' function.
$('body').html(response);
}
});
});
<script>
答案 3 :(得分：0)
我建议在你的html中添加类no-js，将CSS选择器嵌套在它下面，如：
.loading {
display: none;
}
.no-js .loading {
display: block;
//....
}
当您完成加载信用代码后，请将其删除：
$('html').removeClass('no-js');
这会隐藏你的加载微调器，因为html中没有no-js类，这意味着你已经加载了你的信用代码
答案 4 :(得分：0)
如果您的网站中有ajax调用加载一些数据，这就是页面加载速度慢的原因，我找到的最佳解决方案是
UnloadedBehavior = MediaState.StopMSDN link - 在这里你可以添加一些ajax调用并测试它。
答案 5 :(得分：0)
此方法使用WindowOrWorkerGlobalScope.setInterval（https://developer.mozilla.org/en-US/doc）
跟踪文档的就绪状态的方法＆amp;查看<body>元素是否存在。
// Function > Loader Screen Script
(function LoaderScreenScript(window = window, document = window.document, undefined = window.undefined || void 0) {
// Initialization > (Processing Time, Condition, Timeout, Loader (...))
let processingTime = 0,
condition = function() {
// Return
return document.body
},
timeout = function() {
// Return
return (processingTime * 1e3) / 2
},
loaderScreenFontSize = typeof window.loaderScreenFontSize != 'undefined' ? window.loaderScreenFontSize : 14,
loaderScreenMargin = typeof window.loaderScreenMargin != 'undefined' ? window.loaderScreenMargin : 10,
loaderScreenMessage = typeof window.loaderScreenMessage != 'undefined' ? window.loaderScreenMessage : 'Loading, please wait…',
loaderScreenOpacity = typeof window.loaderScreenOpacity != 'undefined' ? window.loaderScreenOpacity : .75,
loaderScreenTransition = typeof window.loaderScreenTransition != 'undefined' ? window.loaderScreenTransition : .675,
loaderScreenWidth = typeof window.loaderScreenWidth != 'undefined' ? window.loaderScreenWidth : 7.5;
// Function > Update
function update() {
// Set Timeout
setTimeout(function() {
// Initialization > (Data, Metadata)
var data = document.createElement('loader-screen-element'),
metadata = setInterval(function() {
/* Logic
[if:else if:else statement]
*/
if (document.readyState == 'complete') {
// Alpha
alpha();
// Test
test()
}
});
// Insertion
document.body.appendChild(data);
// Style > <body> > Overflow
document.body.style = ('overflow: hidden !important; pointer-events: none !important; user-drag: none !important; user-select: none !important;' + (document.body.getAttribute('style') || ' ')).trim();
// Modification > Data
// Inner HTML
data.innerHTML =
'<style media=all type=text/css>' +
'body::selection {' +
'background-color: transparent !important;' +
'text-shadow: none !important' +
'} ' +
'@keyframes rotate {' +
'0% { transform: rotate(0) }' +
'to { transform: rotate(360deg) }' +
'}' +
'</style>' +
"<div style='animation: rotate 1s ease-in-out 0s infinite backwards; border: " + loaderScreenWidth + "px solid rgba(0, 0, 0, " + loaderScreenOpacity + "); border-top-color: rgba(0, 51, 255, " + loaderScreenOpacity + "); border-radius: 50%; height: 75px; margin: 0 auto; margin-bottom: " + loaderScreenMargin + "px; width: 75px'> </div>" +
"<small style='color: rgba(127, 127, 127, .675); font-family: \"Open Sans\", \"Calibri Light\", Calibri, sans-serif; font-size: " + loaderScreenFontSize + "px !important; margin: 0 auto; margin-top: " + loaderScreenMargin + "px; text-align: center'> " + loaderScreenMessage + " </small>";
// Style
data.style = 'align-items: center; background-color: rgba(255, 255, 255, .98); display: flex; flex-direction: column; height: ' + innerHeight + 'px; justify-content: center; left: 0; margin: auto; max-height: 100% !important; max-width: 100% !important; min-height: 100vh; min-width: 100vh; position: fixed; top: 0; transition: ' + loaderScreenTransition + 's ease-in-out; width: ' + innerWidth + 'px; z-index: 2147483647';
// Function
// Alpha
function alpha() {
// Clear Interval
clearInterval(metadata)
};
// Test
function test() {
// Style > Data
// Background Color
data.style.backgroundColor = 'transparent';
// Opacity
data.style.opacity = 0;
// Set Timeout
setTimeout(function() {
// Deletion
data.remove();
// Modification > <body> > Style
document.body.style = document.body.getAttribute('style').replace('overflow: hidden !important;', '').replace('pointer-events: none !important;', '').replace('user-drag: none !important;', '').replace('user-select: none !important;', '');
(document.body.getAttribute('style') || '').trim() || document.body.removeAttribute('style')
}, ((+getComputedStyle(data).getPropertyValue('animation-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('animation-duration').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-delay').replace(/[a-zA-Z]/g, '').trim() + +getComputedStyle(data).getPropertyValue('transition-duration').replace(/[a-zA-Z]/g, '').trim()) * 1e3) + 100);
}
}, timeout())
};
/* Logic
[if:else if:else statement]
*/
if (condition())
// Update
update();
else {
// Initialization > Data
var data = setInterval(function() {
/* Logic
[if:else if:else statement]
*/
if (condition()) {
// Update > Processing Time
processingTime += 1;
// Update
update();
// Metadata
metadata()
}
});
// Function > Metadata
function metadata() {
// Clear Interval
clearInterval(data);
/* Logic
[if:else if:else statement]
> Deletion
*/
if ('data' in window && typeof data == 'undefined')
delete window.data
}
}
})(window, window.document, window.undefined || void 0)
此预装屏幕由Lapys @ https://github.com/LapysDev
制作答案 6 :(得分：0)
function onReady(callback) {
var intervalId = window.setInterval(function() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalId);
callback.call(this);
}
}, 1000);
}
function setVisible(selector, visible) {
document.querySelector(selector).style.display = visible ? 'block' : 'none';
}
onReady(function() {
setVisible('.page', true);
setVisible('#loading', false);
});body {
background: #FFF url("https://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: 'Alex Brush', cursive !important;
}
.page { display: none; padding: 0 0.5em; }
.page h1 { font-size: 2em; line-height: 1em; margin-top: 1.1em; font-weight: bold; }
.page p { font-size: 1.5em; line-height: 1.275em; margin-top: 0.15em; }
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("https://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
<div class="page">
<h1>The standard Lorem Ipsum passage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>答案 7 :(得分：-1)
from tkinter import *
import tkinter as tk
import os
window = tk.Tk()
window.title("Camera")
window.geometry("640x480")
lbl=Label(window,text="Start", font=("Arial Bold",10))
lbl.grid(column=0,row=0)
btn = Button(window, text="Start",command=os.system('capture.py'))
btn.grid(column=1, row=0)
window.mainloop()