Javascript 如何在proloader完成加载之前隐藏所有主体元素_Javascript_Html_Jquery_Css_Twitter Bootstrap

Javascript 如何在proloader完成加载之前隐藏所有主体元素

javascript html jquery css twitter-bootstrap

Javascript 如何在proloader完成加载之前隐藏所有主体元素,javascript,html,jquery,css,twitter-bootstrap,Javascript,Html,Jquery,Css,Twitter Bootstrap,我已经做了一个全屏预加载计数器。我需要在预加载程序加载时隐藏我的所有身体元素，当加载完成时，其他身体元素（如导航栏和部分）可以显示在屏幕上这是我的html代码： <body> <section class="preloader"> <div class="loader"></div> <div class="count"></di

我已经做了一个全屏预加载计数器。我需要在预加载程序加载时隐藏我的所有身体元素，当加载完成时，其他身体元素（如导航栏和部分）可以显示在屏幕上

这是我的

html

代码：

<body>
    <section class="preloader">
        <div class="loader"></div>
        <div class="count"></div>
    </section>
    <header>
    ...
    </header>
    <div id="fullpage">
    ...
    </div>
</body>

这也是预加载程序的

jQuery

部分：

$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
        }
    }, 80)
});

$（文档）.ready（函数（）{
计数=0；
计数器=设置间隔（函数（）{
如果（计数<101）{
$（'.count'）.text（count+'%'）；
$（'.loader'）.css（'width'，count+'%'）；
计数++
}
否则{
清除间隔（计数器）
}
}, 80)
});

那么，在预加载程序完成其进度之前，我如何隐藏所有主体元素呢？

尝试为预加载程序提供足够的

z-index

，使其位于屏幕上任何其他元素的顶部

.loader{
    background: #000;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}
.preloader{
    position:absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    ...
}

在预加载程序中使用z索引或隐藏导航栏和侧栏，直到预加载程序结束

例如：

$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
            $(".sidebar").show();
            $(".navbar").show();
        }
    }, 80)
});

$（文档）.ready（函数（）{
计数=0；
计数器=设置间隔（函数（）{
如果（计数<101）{
$（'.count'）.text（count+'%'）；
$（'.loader'）.css（'width'，count+'%'）；
计数++
}
否则{
清除间隔（计数器）
$（“.sidebar”）.show（）；
$（“.navbar”）.show（）；
}
}, 80)
});

这就是我使用Jquery的方式。我没有你的HTML，所以我使用一个随机的

注意，我使用了

$（'body'）.children（）.not（'script'）.show（），这是因为在StackOverflow中，show（）
函数显示脚本内容

$（'body'）.children（）.hide（）；
$（'.preload'）.show（）；
$（文档）.ready（函数（）{
计数=0；
计数器=设置间隔（函数（）{
如果（计数<101）{
$（'.count'）.text（count+'%'）；
$（'.loader'）.css（'width'，count+'%'）；
计数++
}
否则{
清除间隔（计数器）
$（'body'）.children（）.not（'script'）.show（）；
$（'.preload'）.hide（）；
}
}, 80)
});

你好
世界！

$(document).ready(function(){
    count = 0;
    counter = setInterval(function(){
        if(count < 101){
            $('.count').text(count + '%');
            $('.loader').css('width', count + '%');
            count++
        }
        else{
            clearInterval(counter)
            $(".sidebar").show();
            $(".navbar").show();
        }
    }, 80)
});