如何让加载屏幕消失？html css js

提问者：小点点

如何让加载屏幕消失？html css js

我不能让加载屏幕消失，我试过js，但内容仍然只是为了测试，这里是整个代码，希望有任何帮助，对我来说很容易，我是html css js新手，我不能让加载屏幕消失，我试过js，但内容仍然只是为了测试，这里是整个代码，希望有任何帮助，对我来说很容易，我是html css js新手，我不能让加载屏幕消失，我试过js，但内容仍然只是为了测试，这里是整个代码，对我来说很容易请帮助我，我是html css js的新手，我不能使加载屏幕消失，我尝试了js，但仍然内容只是用于测试，这里是整个代码，任何帮助请帮助我，请帮助我，我是html css js的新手

body {
  width: 100%;
  height: 100%;
  background: wheat;
}

.content {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#gif-wraper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gif {
  display: flex;
  background: black;
  padding: 10px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  transition: opacity 0.3s linear;
}

#text {
  font-family: 'Times New Roman', Times, serif;
  position: fixed;
  display: block;
  top: calc(52% - 10px);
  left: calc(50% - 10px);
  right: calc(50% - 1px);
  transform: translate(-50%, -50%);
  /*box-shadow: black, white;*/
  font-size: 30px;
}

#gif::before {
  content: " ";
  position: fixed;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  top: -155px;
  left: 20px;
  background: black;
  border: 5px solid white;
  box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}

#gif::after {
  /* Segmented circle code goes here */
  content: " ";
  position: fixed;
  height: 280px;
  width: 280px;
  left: -90px;
  top: -90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index: 2;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate( 0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes reverseRotate {
  0% {
    transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
  }
  100% {
    transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
  }
}

@keyframes segmentRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-32000deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate( 0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes reverseRotate {
  0% {
    -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
  }
  100% {
    -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
  }
}

@-webkit-keyframes segmentRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-32000deg);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<script>
  var loader = document.getElementById("gif-wraper");
  window.onload = function() {
    loader.style.display = 'none';
  }
  var x = 0;

  function changeColor() {
    var txtclr = document.getElementById("text");
    var clr = ["black", "white"];
    txtclr.style.color = clr[x];
    x = (x + 1) % clr.length;
  }
  setInterval(changeColor, 300);
</script>

<body>
  <div class="content">
    <img src="https://picsum.photos/300/?random" />
  </div>
  <div id="gif-wraper">
    <div id='gif'></div>
    <div id="text">MK</div>
  </div>
</body>

</html>

null

共3个答案

匿名用户

您所拥有的代码返回此错误:

Uncaught TypeError: Cannot read property 'style' of null

这是因为返回要修复这个问题，您需要将脚本标记放在body标记下面，以便脚本能够找到DOM元素。

匿名用户

正如您在控制台中看到的，您有一个错误:“uncatch TypeError:Cannot read property'style'of null"。发生这种情况是因为您试图在加载程序实际存在之前选择它。您只需在函数中移动行。

null

body {
  width: 100%;
  height: 100%;
  background: wheat;
}

.content {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#gif-wraper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gif {
  display: flex;
  background: black;
  padding: 10px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  transition: opacity 0.3s linear;
}

#text {
  font-family: 'Times New Roman', Times, serif;
  position: fixed;
  display: block;
  top: calc(52% - 10px);
  left: calc(50% - 10px);
  right: calc(50% - 1px);
  transform: translate(-50%, -50%);
  /*box-shadow: black, white;*/
  font-size: 30px;
}

#gif::before {
  content: " ";
  position: fixed;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  top: -155px;
  left: 20px;
  background: black;
  border: 5px solid white;
  box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}

#gif::after {
  /* Segmented circle code goes here */
  content: " ";
  position: fixed;
  height: 280px;
  width: 280px;
  left: -90px;
  top: -90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index: 2;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate( 0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes reverseRotate {
  0% {
    transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
  }
  100% {
    transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
  }
}

@keyframes segmentRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-32000deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate( 0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes reverseRotate {
  0% {
    -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
  }
  10%,
  15%,
  35%,
  40%,
  60%,
  65%,
  85%,
  90% {
    background: black;
    box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
  }
  12.5%,
  37.5%,
  62.5%,
  87.5% {
    background: white;
    box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
  }
  100% {
    -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
  }
}

@-webkit-keyframes segmentRotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-32000deg);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<script>
  
  window.onload = function() {
    var loader = document.getElementById("gif-wraper");
    loader.style.display = 'none';
  }
  var x = 0;

  function changeColor() {
    var txtclr = document.getElementById("text");
    var clr = ["black", "white"];
    txtclr.style.color = clr[x];
    x = (x + 1) % clr.length;
  }
  setInterval(changeColor, 300);
</script>

<body>
  <div class="content">
    <img src="https://picsum.photos/300/?random" />
  </div>
  <div id="gif-wraper">
    <div id='gif'></div>
    <div id="text">MK</div>
  </div>
</body>

</html>

匿名用户

您应该将移动到onload事件函数中，如下所示:

        window.onload = function () {
            var loader = document.getElementById("gif-wraper");
            loader.style.display = 'none';
        }