隐藏预载屏幕后的内容

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

下面是代码

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

来源

2017-04-21 Sean Miller

这里是该网站的链接参考http://jackloudphoto.com/ –

组的z-index为#load_screen至1000。 –

听起来像一个z-index问题。你可以看到哪些元素有更高的z-index，并确保你的#load_screen更高。

但是一个简单的方法是将包装你的页面中的元素（如#page）并将其设置为opacity: 0或display: none，并有#load_screen之外的元素，使网页上的所有默认是隐藏的，只有#load_screen是可见的。

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

来源

2017-04-21 23:32:29

隐藏预载屏幕后的内容

回答

相关问题