在预加载屏幕后面隐藏内容答案

【问题标题】：Hide content behind a preloading screen在预加载屏幕后面隐藏内容
【发布时间】：2017-04-21 23:06:54
【问题描述】：

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

这里是代码

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

【问题讨论】：

这里是网站的链接供参考jackloudphoto.com
将 #load_screen 的 z-index 设置为 1000。

标签： javascript html css preload preloader

【解决方案1】：

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

但一种简单的方法是将您的页面包装在一个元素中（如#page）并将其设置为opacity: 0 或display: none，并在该元素之外添加#load_screen，以便页面上的所有内容都是默认隐藏，只有#load_screen可见。

然后在窗口的load 事件上，隐藏/删除#load_screen 并切换display 或opacity 或#page。除了隐藏加载屏幕以外的所有内容以使元素不会弹出并显示在其上之外，它还为页面添加了简洁的 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>

【讨论】：