javascript - 将内容隐藏在预加载屏幕后面

Question

我有一个预加载屏幕，它会在我的网站内容加载时显示在我的网站上。我遇到的问题是网站上的某些内容会在加载屏幕消失之前出现。具体来说，我在主页上有一个页眉和一个从左右滑入的按钮。这些有时会在加载屏幕消失之前滑入，并且两个屏幕的文本变得困惑。我想这样做，即使动画在加载屏幕消失之前发生，用户也不会看到那里的标题和按钮。更好的方法是让这些动画在加载屏幕消失之前不出现。我可以将动画设置为延迟足够长的时间以使预加载屏幕消失，但如果加载屏幕快速消失，则在动画出现之前可能会有相当长的延迟。

这是代码

HTML

<div id="load_screen" class="text-center">
 <div id="loading" class="text-center">
  <h3>Welcome to Jack Loud Photo!</h3>
  <p>Loading content...</p><i class="fa fa-spinner fa-spin fa-2x" aria-
  hidden="true"></i>
 </div>
</div>

CSS

div#load_screen {
 background: #000;
 opacity: 1;
 position: fixed;
 z-index: 1;
 top: 0px;
 width: 100%;
 height: 1600px;
 font-family: 'Open Sans', sans-serif;
}

div#load_screen > div#loading {
 color: #FFF;
 width: 80%;
 margin: auto;
 margin-top: 300px;
 font-family: 'Open Sans', sans-serif;
}

#loading > i.fa-spinner {
 background-color: transparent;
 color: #28CC9E;
}

Javascript

window.addEventListener("load", function() {
    var load_screen = document.getElementById("load_screen");
    document.body.removeChild(load_screen);
});

Answer 1

听起来像是 z-index 问题。您可以查看哪些元素具有更高的 z-index 并确保您的 #load_screen 更高。

但一个简单的方法是将您的页面包裹在一个元素中(如 #page)并将其设置为 opacity: 0 或 display: none，并在该元素外放置 #load_screen，这样页面上的所有内容默认都隐藏，只有 #load_screen 可见。

然后在窗口的load事件上，隐藏/删除#load_screen并切换display或opacity #页面。除了隐藏加载屏幕以外的所有内容，以便元素不会弹出并显示在其上，它还为页面添加了整洁的 UI/效果。

window.addEventListener("load", function() {
  var load_screen = document.getElementById("load_screen");
  document.body.removeChild(load_screen);
  document.getElementById('page').classList.add('ready');
});

div#load_screen {
 background: #000;
 opacity: 1;
 position: fixed;
 z-index: 1;
 top: 0px;
 width: 100%;
 height: 100vh;
 font-family: 'Open Sans', sans-serif;
}

div#load_screen > div#loading {
 color: #FFF;
 width: 80%;
 margin: auto;
 margin-top: 300px;
 font-family: 'Open Sans', sans-serif;
}

#loading > i.fa-spinner {
 background-color: transparent;
 color: #28CC9E;
}
#page {
  opacity: 0;
  transition: opacity .5s;
}
#page.ready {
  opacity: 1;
}

<div id="page">
  <img src="http://www.clker.com/cliparts/0/f/d/b/12917289761851255679earth-map-huge.jpg">
</div>
<div id="load_screen" class="text-center">
 <div id="loading" class="text-center">
  <h3>Welcome to Jack Loud Photo!</h3>
  <p>Loading content...</p><i class="fa fa-spinner fa-spin fa-2x" aria-
  hidden="true"></i>
 </div>
</div>