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