加载时屏幕上会显示其他选项卡内容,但应该是活动选项卡内容

时间:2016-12-19 17:08:09

标签: jquery html css material-design-lite

我正在尝试在页面加载时向用户显示完整页面加载器,但是我正在努力解决它。我不希望用户在加载时看到其他标签内容。出于某种原因,它会在加载时以及隐藏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();
});

它正在工作,显示加载器并在页面加载后隐藏它但我看到第一个标签内容一秒钟。

0 个答案:

没有答案