Question

简单地说，加载动画（带有白色背景）应该在主页加载时出现。然后它应该在加载完成后消失。适用于Chrome，但不适用于IE和Firefox（动画有效，但不会消失，可能与JS有关）。

***编辑 - 由于我们的客户需要网站处于活动状态，我暂时删除了html。

看看这里：www.championfreight.co.nz

HTML

<div id="backgroundcolor" style="position:fixed; width:100%; height:100%; left:0%; top:0%; z-index:1997">
<div id="followingBallsG" style="left:50%; margin-left:-50px; top:50%; z-index:1998">
<div id="followingBallsG_1" class="followingBallsG">
</div>
<div id="followingBallsG_2" class="followingBallsG">
</div>
<div id="followingBallsG_3" class="followingBallsG">
</div>
<div id="followingBallsG_4" class="followingBallsG">
</div>
</div>
</div>

JS

window.onload = function()
{ 
document.getElementById("followingBallsG").style.visibility = "hidden" 
document.getElementById("backgroundcolor").style.visibility = "hidden" 
}

CSS

#backgroundcolor{
background-color:white
}

#followingBallsG{
position:relative;
width:100px;
height:8px;
}

.followingBallsG{
background-color:#000000;
position:absolute;
top:0;
left:0;
width:8px;
height:8px;
-moz-border-radius:4px;
-moz-animation-name:bounce_followingBallsG;
-moz-animation-duration:1.4s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px;
-webkit-animation-name:bounce_followingBallsG;
-webkit-animation-duration:1.4s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px;
-ms-animation-name:bounce_followingBallsG;
-ms-animation-duration:1.4s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px;
-o-animation-name:bounce_followingBallsG;
-o-animation-duration:1.4s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px;
animation-name:bounce_followingBallsG;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#followingBallsG_1{
-moz-animation-delay:0s;
}

#followingBallsG_1{
-webkit-animation-delay:0s;
}

#followingBallsG_1{
-ms-animation-delay:0s;
}

#followingBallsG_1{
-o-animation-delay:0s;
}

#followingBallsG_1{
animation-delay:0s;
}

#followingBallsG_2{
-moz-animation-delay:0.14s;
-webkit-animation-delay:0.14s;
-ms-animation-delay:0.14s;
-o-animation-delay:0.14s;
animation-delay:0.14s;
}

#followingBallsG_3{
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}

#followingBallsG_4{
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}

@-moz-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}

50%{
left:93px;
background-color:#000000;
}

100%{
left:0px;
background-color:#000000;
}

}

@-webkit-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}

50%{
left:93px;
background-color:#000000;
}

100%{
left:0px;
background-color:#000000;
}

}

@-ms-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}

50%{
left:93px;
background-color:#000000;
}

100%{
left:0px;
background-color:#000000;
}

}

@-o-keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}

50%{
left:93px;
background-color:#000000;
}

100%{
left:0px;
background-color:#000000;
}

}

@keyframes bounce_followingBallsG{
0%{
left:0px;
background-color:#000000;
}

50%{
left:93px;
background-color:#000000;
}

100%{
left:0px;
background-color:#000000;
}

}

Answer 1

啊！我知道了。但这可能不适用于Firefox，因为它们会在“加载另一个页面”时关闭动画。使动画工作的唯一方法是使用AJAX进行加载。这是一些工作，你可能会遇到搜索引擎的问题，如果你这样做，因为AJAX不会被搜索引擎运行，你不会从搜索引擎获得任何点击，所以糟糕的想法......

对于某些浏览器，元素不会消失

1 个答案: