我创建了一个小型页面加载程序，其中包括一个检查您以前是否在页面上的函数(sessionStorage(。
否则Pageloader将不会显示，我这样做是为了防止您从内部页面导航到"；家；页面加载程序不会再次显示，但现在在laoder出现之前，突然有几毫秒的延迟。
代码：
<style>
#loader {
visibility:hidden;
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background-color: white;
animation-name: loadinganimation;
animation: loadinganimation 1s;
animation-iteration-count: 3;
font: 100px helvetica, bold;
color:#F5FF00;
display:block;
margin:auto;
}
@keyframes loadinganimation {
0%,49% {
background-color: white;
}
50%,100% {
background-color: black;
}
}
#letterMD{
position: absolute;
margin-left: 33%;
margin-top: 7.5%;
}
#letterAI{
position: absolute;
margin-top: 7.5%;
margin-left: 63%
}
#I{
margin-top: 42vh;
margin-left: 1vh;
}
#D{
margin-top: 42vh;
}
@media (max-width: 500px) {
#letterAI {
position: absolute;
margin-top: 57%;
margin-left: 80%
}
#letterMD{
position: absolute;
margin-left: 5%;
margin-top: 57%;
}
#I{
margin-top: 20vh;
margin-left: 1vh;
}
#D{
margin-top:20vh;
}
}
</style>
<body onload="myFunction()">
<script>
var loadinganimation;
function myFunction() {
loadinganimation = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById('loader').style.display = 'none';
}
jQuery(window).load(function() {
if (sessionStorage.getItem('dontLoad') == null)
{
document.getElementById('loader').style.visibility = 'visible';
sessionStorage.setItem('dontLoad', 'true');
}
});
</script>
<div id="loader">
<div1 id="letterMD"><p id="M">M</p><p id="D">D</p></div1>
<div2 id="letterAI"><p id="A">A</p>
<p id="I">I</p></div2>
</div>
</body>您正在使用onload="myFunction()"和jQuery(window).load()。这两者都将等待页面加载(并可能显示(。对于您当前的代码，您需要这样做，因为您试图选择加载程序。但你可以避免这种情况。
这里有一个可能的解决方案：
- 在
.page-loading中添加一个以#loader为目标的CSS样式以显示它 - 如有必要，将
.page-loading添加到父HTML元素中 - 3秒钟后取出
有了这一点，您不需要准备好DOM，您可以直接从head部分执行此代码，然后再进行任何渲染：
<html>
<head>
<style>
/* ...your styles.. + this: */
.page-loading #loader { visibility: visible; }
</style>
<script>
if (sessionStorage.getItem('dontLoad') == null) {
sessionStorage.setItem('dontLoad', 'true');
document.documentElement.classList.add('page-loading');
setTimeout(function() {
document.documentElement.classList.remove('page-loading');
}, 3000);
}
</script>
</head>
<body>
<div id="loader"></div>
</body>
</html>