加载微调器 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);
}