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的{{1}}或opacity。除了隐藏加载屏幕之外的所有内容，以便元素不会弹出并显示在它上面，它还为页面添加了一个简洁的UI /效果。

#page

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

隐藏预加载屏幕后面的内容

1 个答案: