隐藏预载屏幕后的内容
问题描述:
我有一个预加载屏幕,当网站的内容加载时,我在我的网站上显示。我遇到的问题是,在加载屏幕消失之前,网站上的一些内容将出现。具体来说,我在主页上有一个页面标题和一个从左右滑动的按钮。这些有时会在载入屏幕消失之前滑入并且两个屏幕的文本混乱。我想这样做,即使动画发生在加载屏幕消失之前,用户也不会看到那里的标题和按钮。更好的办法是在负载屏幕消失之前使这些动画不发生。我可以将动画延迟足够长的时间以使预加载屏幕消失,但是如果加载屏幕快速消失,在动画发生之前可能会有相当长的延迟时间。隐藏预载屏幕后的内容
下面是代码
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);
});
答
听起来像一个z-index
问题。你可以看到哪些元素有更高的z-index
,并确保你的#load_screen
更高。
但是一个简单的方法是将包装你的页面中的元素(如#page
)并将其设置为opacity: 0
或display: none
,并有#load_screen
之外的元素,使网页上的所有默认是隐藏的,只有#load_screen
是可见的。
然后在窗口的load
事件,隐藏/删除#load_screen
和切换display
或#page
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>
这里是该网站的链接参考http://jackloudphoto.com/ –
组的z-index为#load_screen至1000。 –