我正在尝试在页面加载时向用户显示完整页面加载器,但是我正在努力解决它。我不希望用户在加载时看到其他标签内容。出于某种原因,它会在加载时以及隐藏page-loader
后显示第一个标签内容。(我使用Material Design Lite库作为标签)。
我创建了这样的加载器:
<!-- Page loader -->
<div class="page-cover">
<div id="overlayLoading" class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-teal lighten-1-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<!-- Page Loader End -->
并使用此css使其成为完整页面:
.page-cover{
background: #212121;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 800;
}
使用JQUERY我隐藏了它:
$(document).ready(function() {
$('.page-cover').fadeOut();
});
它正在工作,显示加载器并在页面加载后隐藏它但我看到第一个标签内容一秒钟。