javascript - 加载图像没有出现在我的主页中央

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>