0

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?

Dean Elliott
  • 169
  • 5
  • 12
  • How you are showing load as of now? – Guruprasad J Rao Oct 29 '15 at 11:58
  • Those animations are buggy because they are animated gifs, which already start animating while they are loading, so the animation stalls if the next frame isn't loaded yet. Lessen learnt, don't make the site ad-heavy, and especially avoid adds like the one on the site you linked, which opens a popup as soon as you click anywhere on the site, because people can become very agressive by such obtrisive behavior. I suggest you remove that link, since it is not representative for your question. – GolezTrol Oct 29 '15 at 11:58
  • Does your loading animation have to be a gif? Why not create one purely in CSS with keyframes, or animate an element in a loop with jQuery. It sounds like the site is already way too bogged down to need any more images being stacked on top. – Jonathan Bowman Oct 29 '15 at 12:20
  • 1
    Possible duplicate of [Display a loading bar before the entire page is loaded](http://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded) – gon250 Oct 29 '15 at 12:46

1 Answers1

0

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;
Ryan
  • 427
  • 2
  • 15