在所有页面内容加载之前，CSS动画都会出错

Question

我正在开发一个相对广告的网站，需要3到7秒才能完全加载（取决于网页上的广告数量和连接速度），我想在上面添加一个CSS加载动画在页面完全加载之前的所有内容。

唯一的问题是，动画非常小巧，直到页面完全加载，几乎无关紧要。

我的意思（不是我的网站）的一个示例是http://smallenvelop.com/display-loading-icon-page-loads-completely/动画在页面加载之前都非常错误，此时它们开始流畅地制作动画。

有没有办法解决这个问题？

Answer 1

你可以让jQuery等到页面加载，淡出等待x毫秒。

将此div放入您的html

<div class="loader"></div>

然后就在你所有js的最后一行：

$(window).load(function() {
    $(".loader").fadeOut(5000); 
});

在你的css中：

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../myloadinganimation.gif) center no-repeat #fff;