时间戳

首页 > 解决方案 > Html css javascript preloader代码，我下面有一段代码，为什么javascript无法重新加载

javascript - Html css javascript preloader代码，我下面有一段代码，为什么javascript无法重新加载

问题描述

下面是我的 javascript 代码，为什么我刷新时预加载器不显示？当它开始运行javascript时，我用来在其中附加一个新预加载器的第一个代码，有谁知道我如何在底部附加一个用来替换另一个东西的东西，以及三个螺丝刀在这个地方运行并且这里。

$('body').append('<div id="loader-background"><div class="load"><div class="gear one"><svg id="blue" viewbox="0 0 100 100" fill="#aeb2b7"><path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6      c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3      l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9      c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path></svg></div><div class="gear two"><svg id="pink" viewbox="0 0 100 100" fill="#ff6c60"><path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6      c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3      l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9      c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path></svg></div><div class="gear three"><svg id="yellow" viewbox="0 0 100 100" fill="#36404e"><path d="M97.6,55.7V44.3l-13.6-2.9c-0.8-3.3-2.1-6.4-3.9-9.3l7.6-11.7l-8-8L67.9,20c-2.9-1.7-6-3.1-9.3-3.9L55.7,2.4H44.3l-2.9,13.6      c-3.3,0.8-6.4,2.1-9.3,3.9l-11.7-7.6l-8,8L20,32.1c-1.7,2.9-3.1,6-3.9,9.3L2.4,44.3v11.4l13.6,2.9c0.8,3.3,2.1,6.4,3.9,9.3      l-7.6,11.7l8,8L32.1,80c2.9,1.7,6,3.1,9.3,3.9l2.9,13.6h11.4l2.9-13.6c3.3-0.8,6.4-2.1,9.3-3.9l11.7,7.6l8-8L80,67.9      c1.7-2.9,3.1-6,3.9-9.3L97.6,55.7z M50,65.6c-8.7,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6s15.6,7,15.6,15.6S58.7,65.6,50,65.6z"></path></svg></div></div><div class="text">loading</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});

这是我使用 vannila js 为我的网页设置预加载器样式的 CSS 代码。下面的 css 正确显示所有颜色和其他细节

#loader-background {
    position:absolute;;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #f1f2f7;
    z-index: 5;
}

.load {
  position: relative;
  margin: 50px auto;
  width: 100px;
  height: 80px;
  z-index: 10;
}

.gear {
  position: absolute;
  z-index: 15;
  width: 40px;
  height: 40px;
  animation: spin 5s infinite;
}

.two {
  left: 40px;
  width: 80px;
  height: 80px;
  animation: spin-reverse 5s infinite;
}

.three {
  top: 45px;
  left: -10px;
  width: 60px;
  height: 60px;
}

@keyframes spin {
  50% {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  50% {
    transform: rotate(-360deg);
  }
}

.lil-circle {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 0 10px 2px gray, 0 0 50px white;
  width: 100px;
  height: 100px;
  opacity: .65;
}

.blur-circle {
    z-index: 20;
  position: absolute;
  top: -19px;
  left: -19px;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

标签： javascripthtmlcsssvg

解决方案

尝试这个：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1 class="loader">preloader</h1>
    <script>
      window.onload = () => {
        setTimeout(() => {
          document.querySelector('.loader').remove()
        }, 1000)
      }
    </script>
  </body>
</html>

我会做和推荐的不是通过 Js 添加预加载器，而是像我在上面的示例中那样静态地编写它。

编辑：

要在预加载器时间到期后将其替换为其他内容，您可以在页面加载时将预加载器包装在 div 和 JS 中更改其内容innerHTML：

<div class='loader'>
 <h1>Loading...</h1>
</div>

window.onload = () => {
 setTimeout(() => {
  document.querySelector('.loader').innerHTML = '<h1>Your content</h1>'
 }, 1000)
}

推荐阅读