Javascript 尝试使用loader动画来购买我的网页，但网页仍然只在动画之后加载，并且是分块加载
我试图使一个网站，利用一个加载动画在开始购买我的网站的“大批量”一些时间加载。我将加载程序动画设置为3秒，并将我的Javascript 尝试使用loader动画来购买我的网页，但网页仍然只在动画之后加载，并且是分块加载,javascript,html,css,loader,Javascript,Html,Css,Loader,我试图使一个网站，利用一个加载动画在开始购买我的网站的“大批量”一些时间加载。我将加载程序动画设置为3秒，并将我的元素显示为隐藏。然而，当3秒加载程序动画完成时，我的网站仍然以块的形式加载 下面列出的代码与我使用的代码完全相同，但是为了这个线程，被简化为一个简单的句子。实际上，我正在使用一个html/css/js/bootstrap模板，其中包含图片、favicon和其他内容。这不是一个沉重的网站，但有大量的媒体在那里 .cssload容器*，.cssload容器*：之前，.cssload容
.cssload容器*，.cssload容器*：之前，.cssload容器*：之后{
框大小：边框框；
-o型盒尺寸：边框盒；
-ms框尺寸：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
}
.cssload容器{
保证金：自动；
宽度：68px；
高度：29px；
位置：固定；/*或绝对*/
最高：50%；
左：50%；
}
.cssload容器>div{
浮动：左；
背景：rgb（185108255）；
身高：100%；
宽度：5px；
右边距：1px；
显示：内联块；
}
.cssload容器.cssload-shaft1{
动画延迟：0.06s；
-o-动画延迟：0.06s；
-毫秒动画延迟：0.06s；
-webkit动画延迟：0.06s；
-moz动画延迟：0.06s；
}
.cssload容器.cssload-shaft2{
动画延迟：0.12s；
-o-动画延迟：0.12s；
-ms动画延迟：0.12s；
-webkit动画延迟：0.12s；
-moz动画延迟：0.12s；
}
.cssload容器.cssload-shaft3{
动画延迟：0.17s；
-o-动画延迟：0.17s；
-ms动画延迟：0.17s；
-webkit动画延迟：0.17s；
-moz动画延迟：0.17s；
}
.cssload容器.cssload-shaft4{
动画延迟：0.23s；
-o-动画延迟：0.23s；
-ms动画延迟：0.23s；
-webkit动画延迟：0.23s；
-moz动画延迟：0.23s；
}
.cssload容器.cssload-shaft5{
动画延迟：0.29s；
-o-动画延迟：0.29s；
-ms动画延迟：0.29s；
-webkit动画延迟：0.29s；
-moz动画延迟：0.29s；
}
.cssload容器.cssload-shaft6{
动画延迟：0.35s；
-o-动画延迟：0.35s；
-ms动画延迟：0.35s；
-webkit动画延迟：0.35s；
-moz动画延迟：0.35s；
}
.cssload容器.cssload-shaft7{
动画延迟：0.4s；
-o-动画-延迟：0.4s；
-ms动画延迟：0.4s；
-webkit动画延迟：0.4s；
-moz动画延迟：0.4s；
}
.cssload容器.cssload-shaft8{
动画延迟：0.46s；
-o-动画延迟：0.46s；
-ms动画延迟：0.46s；
-webkit动画延迟：0.46s；
-moz动画延迟：0.46s；
}
.cssload容器.cssload-shaft9{
动画延迟：0.52s；
-o-动画延迟：0.52s；
-ms动画延迟：0.52s；
-webkit动画延迟：0.52s；
-moz动画延迟：0.52s；
}
.cssload容器.cssload-shaft10{
动画延迟：0.58s；
-o-动画延迟：0.58s；
-ms动画延迟：0.58s；
-webkit动画延迟：0.58s；
-moz动画延迟：0.58s；
}
.cssload容器{
高度：39px；
}
.cssload容器>div{
位置：相对位置；
底部：0；
边缘顶部：34px；
高度：5px；
动画：cssload wave 1.73s无限轻松输入输出；
-o型动画：cssload wave 1.73s无限轻松输入输出；
-ms动画：cssload wave 1.73s无限轻松输入输出；
-webkit动画：cssload wave 1.73s无限轻松输入输出；
-moz动画：cssload wave 1.73s无限轻松输入输出；
}
.cssload容器。轴1{
动画延迟：-1.73s；
-o-延时：-1.73s；
-毫秒动画延迟：-1.73s；
-webkit动画延迟：-1.73s；
-moz动画延迟：-1.73秒；
}
.cssload容器。轴2{
动画延迟：-1.61s；
-o-延时：-1.61s；
-毫秒动画延迟：-1.61s；
-webkit动画延迟：-1.61s；
-moz动画延迟：-1.61s；
}
.cssload集装箱。轴3{
动画延迟：-1.5s；
-o-动画延迟：-1.5s；
-毫秒动画延迟：-1.5s；
-webkit动画延迟：-1.5s；
-moz动画延迟：-1.5s；
}
.cssload容器。轴4{
动画延迟：-1.38s；
-o-延时：-1.38s；
-毫秒动画延迟：-1.38s；
-webkit动画延迟：-1.38s；
-moz动画延迟：-1.38s；
}
.cssload集装箱。轴5{
动画延迟：-1.27秒；
-o-延时：-1.27s；
-毫秒动画延迟：-1.27秒；
-webkit动画延迟：-1.27s；
-moz动画延迟：-1.27秒；
}
.cssload容器。轴6{
动画延迟：-1.15秒；
-o-延时：-1.15秒；
-毫秒动画延迟：-1.15秒；
-webkit动画延迟：-1.15秒；
-moz动画延迟：-1.15秒；
}
.cssload容器.轴7{
动画延迟：-1.04秒；
-o-动画延迟：-1.04s；
-毫秒动画延迟：-1.04秒；
-
<!DOCTYPE html>
<html>
<head>
<style>
.cssload-container *, .cssload-container *:before, .cssload-container *:after{
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.cssload-container {
margin: auto;
width: 68px;
height: 29px;
position: fixed; /* or absolute */
top: 50%;
left: 50%;
}
.cssload-container > div {
float: left;
background: rgb(185,108,255);
height: 100%;
width: 5px;
margin-right: 1px;
display: inline-block;
}
.cssload-container .cssload-shaft1 {
animation-delay: 0.06s;
-o-animation-delay: 0.06s;
-ms-animation-delay: 0.06s;
-webkit-animation-delay: 0.06s;
-moz-animation-delay: 0.06s;
}
.cssload-container .cssload-shaft2 {
animation-delay: 0.12s;
-o-animation-delay: 0.12s;
-ms-animation-delay: 0.12s;
-webkit-animation-delay: 0.12s;
-moz-animation-delay: 0.12s;
}
.cssload-container .cssload-shaft3 {
animation-delay: 0.17s;
-o-animation-delay: 0.17s;
-ms-animation-delay: 0.17s;
-webkit-animation-delay: 0.17s;
-moz-animation-delay: 0.17s;
}
.cssload-container .cssload-shaft4 {
animation-delay: 0.23s;
-o-animation-delay: 0.23s;
-ms-animation-delay: 0.23s;
-webkit-animation-delay: 0.23s;
-moz-animation-delay: 0.23s;
}
.cssload-container .cssload-shaft5 {
animation-delay: 0.29s;
-o-animation-delay: 0.29s;
-ms-animation-delay: 0.29s;
-webkit-animation-delay: 0.29s;
-moz-animation-delay: 0.29s;
}
.cssload-container .cssload-shaft6 {
animation-delay: 0.35s;
-o-animation-delay: 0.35s;
-ms-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
-moz-animation-delay: 0.35s;
}
.cssload-container .cssload-shaft7 {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
}
.cssload-container .cssload-shaft8 {
animation-delay: 0.46s;
-o-animation-delay: 0.46s;
-ms-animation-delay: 0.46s;
-webkit-animation-delay: 0.46s;
-moz-animation-delay: 0.46s;
}
.cssload-container .cssload-shaft9 {
animation-delay: 0.52s;
-o-animation-delay: 0.52s;
-ms-animation-delay: 0.52s;
-webkit-animation-delay: 0.52s;
-moz-animation-delay: 0.52s;
}
.cssload-container .cssload-shaft10 {
animation-delay: 0.58s;
-o-animation-delay: 0.58s;
-ms-animation-delay: 0.58s;
-webkit-animation-delay: 0.58s;
-moz-animation-delay: 0.58s;
}
.cssload-container {
height: 39px;
}
.cssload-container > div {
position: relative;
bottom: 0;
margin-top: 34px;
height: 5px;
animation: cssload-wave 1.73s infinite ease-in-out;
-o-animation: cssload-wave 1.73s infinite ease-in-out;
-ms-animation: cssload-wave 1.73s infinite ease-in-out;
-webkit-animation: cssload-wave 1.73s infinite ease-in-out;
-moz-animation: cssload-wave 1.73s infinite ease-in-out;
}
.cssload-container .shaft1 {
animation-delay: -1.73s;
-o-animation-delay: -1.73s;
-ms-animation-delay: -1.73s;
-webkit-animation-delay: -1.73s;
-moz-animation-delay: -1.73s;
}
.cssload-container .shaft2 {
animation-delay: -1.61s;
-o-animation-delay: -1.61s;
-ms-animation-delay: -1.61s;
-webkit-animation-delay: -1.61s;
-moz-animation-delay: -1.61s;
}
.cssload-container .shaft3 {
animation-delay: -1.5s;
-o-animation-delay: -1.5s;
-ms-animation-delay: -1.5s;
-webkit-animation-delay: -1.5s;
-moz-animation-delay: -1.5s;
}
.cssload-container .shaft4 {
animation-delay: -1.38s;
-o-animation-delay: -1.38s;
-ms-animation-delay: -1.38s;
-webkit-animation-delay: -1.38s;
-moz-animation-delay: -1.38s;
}
.cssload-container .shaft5 {
animation-delay: -1.27s;
-o-animation-delay: -1.27s;
-ms-animation-delay: -1.27s;
-webkit-animation-delay: -1.27s;
-moz-animation-delay: -1.27s;
}
.cssload-container .shaft6 {
animation-delay: -1.15s;
-o-animation-delay: -1.15s;
-ms-animation-delay: -1.15s;
-webkit-animation-delay: -1.15s;
-moz-animation-delay: -1.15s;
}
.cssload-container .shaft7 {
animation-delay: -1.04s;
-o-animation-delay: -1.04s;
-ms-animation-delay: -1.04s;
-webkit-animation-delay: -1.04s;
-moz-animation-delay: -1.04s;
}
.cssload-container .shaft8 {
animation-delay: -0.92s;
-o-animation-delay: -0.92s;
-ms-animation-delay: -0.92s;
-webkit-animation-delay: -0.92s;
-moz-animation-delay: -0.92s;
}
.cssload-container .shaft9 {
animation-delay: -0.81s;
-o-animation-delay: -0.81s;
-ms-animation-delay: -0.81s;
-webkit-animation-delay: -0.81s;
-moz-animation-delay: -0.81s;
}
.cssload-container .shaft10 {
animation-delay: -0.69s;
-o-animation-delay: -0.69s;
-ms-animation-delay: -0.69s;
-webkit-animation-delay: -0.69s;
-moz-animation-delay: -0.69s;
}
.cssload-container .shaft11 {
animation-delay: -0.58s;
-o-animation-delay: -0.58s;
-ms-animation-delay: -0.58s;
-webkit-animation-delay: -0.58s;
-moz-animation-delay: -0.58s;
}
@keyframes cssload-wave {
50% {
height: 100%;
margin-top: 0;
background: rgb(86,215,198);
}
}
@-o-keyframes cssload-wave {
50% {
height: 100%;
margin-top: 0;
background: rgb(86,215,198);
}
}
@-ms-keyframes cssload-wave {
50% {
height: 100%;
margin-top: 0;
background: rgb(86,215,198);
}
}
@-webkit-keyframes cssload-wave {
50% {
height: 100%;
margin-top: 0;
background: rgb(86,215,198);
}
}
@-moz-keyframes cssload-wave {
50% {
height: 100%;
margin-top: 0;
background: rgb(86,215,198);
}
}
h2 {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader">
<div class="cssload-container">
<div class="cssload-shaft1"></div>
<div class="cssload-shaft2"></div>
<div class="cssload-shaft3"></div>
<div class="cssload-shaft4"></div>
<div class="cssload-shaft5"></div>
<div class="cssload-shaft6"></div>
<div class="cssload-shaft7"></div>
<div class="cssload-shaft8"></div>
<div class="cssload-shaft9"></div>
<div class="cssload-shaft10"></div>
</div>
</div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Zing! If you're seeing this after the loader animation, it works!</h2>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "inline";
}
</script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function(event) {
showPage();
});