加载微调器gif图像卡住了

Question

当我试图离开页面时，我正在使用加载微调器。我使用的是gif而不是web kit转换，因为我需要支持opera和firefox等浏览器。当我试图离开页面时，微调器工作很短的时间，然后卡住。但是，该页面是定向的。是因为gif文件是4KB吗？如何解决这个问题？

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