CSS动画在所有页面内容加载之前都是错误的

Question

I am working on a relatively ad heavy website that takes between 3 - 7 seconds to fully load (Depending on the number of ads on a page and the speed of the connection) and I want to add a CSS loading animation over the top of everything until the page has fully loaded.

The only problem is, the animation is very glitchy UNTIL the page has fully loaded rendering it almost irrelevant.

An example of what I mean (Not my site) is here http://smallenvelop.com/display-loading-icon-page-loads-completely/ the animations are all quite buggy until the page has loaded, at which time they start animating smoothly.

Is there any way to counter this?

Answer 1

You could let jQuery wait until the page is loaded, fade out of wait x milliseconds.

Place this div into your html

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

Then right at the last line of all your js:

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

In your css:

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