Загрузка изображения GIF Spinner застревает

Question

Я использую загрузочный счетчик, когда пытаюсь покинуть страницу.Я использую GIF вместо преобразования веб-набора, потому что мне нужно поддерживать браузеры, такие как Opera и Firefox.Когда я пытаюсь покинуть страницу, прядильщик работает очень короткое время, затем застревает.Тем не менее, страница направлена.Это потому, что файл GIF 4 КБ?Как решить эту проблему?

Answer 1

Я сталкивался с этим раньше.Это происходит потому, что, когда вы уходите со страницы, браузер начинает выгружать все ресурсы.Это включает в себя изображение .gif и останавливает анимацию.

Я обнаружил, что использование JavaScript для анимации по сравнению с использованием анимированного .gif продлит анимацию.Просто сделайте спрайт из разных фреймов и сделайте что-то вроде этого.В этом примере ваши спрайт-кадры будут идти слева направо:

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);
}