如何在网站满载之前隐藏加载屏幕？

Question

我正在处理我的个人论坛/网站，我有以下错误，我一直在修理它，但我不知道我还能做些什么。

错误：正如您在图像3中看到的那样，我有我的徽标（aa）和它下面的文本，并且在内容页面已满载并且正在显示之后它仍然显示。在隐藏加载场景（图像编号1）后，aa和under文本需要大约3秒钟才能隐藏。

我试图删除转换：3秒，错误仍在那里。

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

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

错误和代码已删除的网址

我曾尝试使用代码段工具创建模拟，但没有图像和所有文本等...你无法看到错误，因为模拟需要不到1秒才能满载。那么我发现它展示它的唯一方法是共享我的网站所在的URL（我知道这不是分享问题的最佳方式）以及我用来隐藏加载屏幕的JS。

由于

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

...将解决它。

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