Loding图像未出现在我的主页的中心

Question

我正在使用加载的gif图像在主页加载时显示，但它显示在侧面如下所示，我不知道为什么？

我的代码：

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);
  }
}

#load {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url('../../images/page-loader.gif') no-repeat center center
}

<div id="load"></div>

Answer 1

我怀疑你的CSS或HTML中还有一些东西扰乱了你的微调器。在下面的示例中，它工作正常。

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";
    }, 2000);
  }
}

#load {
  width: 100%;
  height: 100px;
  background: url('https://68.media.tumblr.com/695ce9a82c8974ccbbfc7cad40020c62/tumblr_o9c9rnRZNY1qbmm1co1_500.gif') no-repeat center center;
}

<div id="load"></div>
<div id="contents">
  this is my page
  </div>

Answer 2

嗯......一个简单的例子是旋转器推入另一个DIV。这样的事情。

https://codepen.io/anon/pen/bRRqoy

div {
  display: block;
  text-align: center;
}

span {
  background-color: red;
  width: 1em;
  height: 1em;
  display: inline-block;
}

<div>
  <span></span>
</div>

你也可以尝试使用Fontawesome，你可以使用他们的助手类，让你的例子变得更加轻松。

此致