html - 加载微调器 gif 图像卡住

Question

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

Answer 1

我以前遇到过这个。发生这种情况是因为，当您离开页面时，浏览器开始卸载所有资源。这包括 .gif 图像，它会停止动画。

我发现使用 JavaScript 制作动画与使用动画 .gif 相比会使动画持续时间更长。只需制作不同帧的 Sprite 并执行类似的操作。在这个例子中，你的 Sprite 帧将从左到右:

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