javascript - 如何在网站完全加载之前隐藏加载屏幕？

Question

我正在处理我的个人作品集/网站，我有以下错误，我一直试图自己修复它，但我不知道我还能做什么。

错误:正如您在图 3 中看到的，我有我的 Logo (aa) 和下面的文本，在内容页面已完全加载并显示后它仍然显示。在加载屏幕(图片编号 1)隐藏后，aa 和下面的文字需要大约 3 秒才能隐藏。

我已经尝试删除 transation: 3 sec，但错误仍然存​​在。

知道问题出在哪里吗？我该如何解决？

我也不知道如何与您分享这个问题的最佳方式。我的意思是我在此页面上的代码，以便您可以轻松检查它。

错误和代码被删除的 URL

我尝试使用代码片段工具创建一个模型，但没有图像和所有文本等。您看不到错误，因为模型需要不到 1 秒的时间才能完全加载。因此，我发现显示它的唯一方法是共享我网站所在的 URL(我知道这不是共享问题的最佳方式)以及我用来隐藏加载屏幕的 JS。

谢谢

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {
    setTimeout(function() {
      document.getElementById('interactive');
      document.getElementById('load').style.visibility = "hidden";
      document.getElementById('content').className = '';
    });
  }
}

如果您知道另一种与您分享的方式，请告诉我。

Answer 1

#load.notransation {
  z-index: -1;
}

... 会修复它。

发生的事情是加载器隐藏得太晚了。通过使用负值 z-index，您可以确保在加载内容时，它会加载到加载程序之上，因此隐藏得太晚不再重要。