我想显示 Ring.html 几秒钟，直到 About.html 完全加载。当 About.html 完全加载时，Ring.html 应该会消失。由于我是网络开发的新手，非常感谢您的帮助。如果要使用 jQuery，那么请告诉我如何以及在何处添加小步骤中的代码。我曾尝试查看其他人的答案，但无法理解如何将它们应用于我的代码。这是我的微调器的 Ring.html 页面 <!doctype html><html> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <link href="Ring.css" rel="stylesheet"> </head> <body> <div class="ring"> Loading <span></span> </div> </body></html>这是我的微调器的 Ring.css 代码body{ margin:0; padding:0; background:#262626;}.ring{ position:absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width:150px; height:150px; background:transparent; border-radius:50%; text-align:center; line-height:150px; font-family: 'Pacifico', cursive;; font-size:20px; color:#9e1ac9; letter-spacing:4px; text-shadow:0 0 10px #9e1ac9; box-shadow:0 0 20px rgba(0,0,0,.5);}.ring{ border:3px solid #3c3c3c;}.ring:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; animation: animateCircle 2s linear infinite;}.ring:before{ border: 3px solid transparent; border-top: 3px solid #9e1ac9; border-right: 3px solid #9e1ac9;}span{ display:block; position: absolute; top: calc(50% - 2px); Left: 50%; width: 50%; height: 4px; background: transparent; transform-origin: left; animation: animate 2s linear infinite;}span:before{ content:''; position:absolute; width: 16px; height: 16px; border-radius: 50%; background: #9e1ac9; top: -6px; right: -8px; box-shadow: 0 0 20px #9e1ac9;}@keyframes animateCircle{ 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); }}@keyframes animate{ 0% { transform:rotate(45deg); } 100% { transform:rotate(405deg); }}
2 回答
UYOU
TA贡献1878条经验 获得超4个赞
window.addEventListener('load', function() {
document.getElementById('loader').style.display = 'none';
});
在这种情况下，您的加载程序必须具有#loader 的 id。
拉丁的传说
TA贡献1789条经验 获得超8个赞
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
这是你的身体
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
如果 readyState 等于 complete，这将是语句触发器， document.readyState可以有 3 个值，即loading,interactive和complete..
如果document.readyState变为complete，则微调器隐藏..
你应该让你的微调器全屏，最重要的是
.ring {
width:100%;
height:100%;
position:fixed;
z-index:999;
}
添加回答
举报
0/150
提交
取消