为了账号安全,请及时绑定邮箱和手机立即绑定

显示微调器,直到页面完全加载

显示微调器,直到页面完全加载

侃侃尔雅 2022-10-08 18:05:14

我想显示 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贡献1622条经验 获得超4个赞

window.addEventListener('load', function() {

   document.getElementById('loader').style.display = 'none';

});

在这种情况下,您的加载程序必须具有#loader 的 id。


查看完整回答
反对 回复 2022-10-08
?
拉丁的传说

TA贡献1521条经验 获得超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;

}


查看完整回答
反对 回复 2022-10-08
  • 2 回答
  • 0 关注
  • 26 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信