Question

I am using a loading spinner when I am trying to leave a page. I am using a gif instead of web kit transform because I need to support browsers like opera and firefox. When I try to leave the page, the spinner works for a very short while, then gets stuck. However, the page is directed. Is it because the gif file is 4KB ? How to solve this issue ?

Answer 1

I’ve run into this before. It’s happening because, when you navigate away from the page, the browser starts to unload all the resources. This includes the .gif image, and it stops the animation.

I’ve found that using JavaScript to do an animation versus using an animated .gif will keep the animation going longer. Just make a sprite of the different frames and do something like this. In this example your sprite frames would go from left to right:

var numFrames = 10, frameWidth = 50, frameDuration = 200, currentFrame = 0;

function animate() {
    var position = frameWidth * currentFrame * -1;
    $('#sprite-element').css('background-position', position + 'px 0px');
    if(currentFrame == numFrames - 1)
        currentFrame = 0;
    else
        currentFrame++;

    setTimeout(animate, frameDuration);
}