加载 Spinner gif 图像时卡住

发布于 2024-11-08 10:59:59 字数 143 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

护你周全 2024-11-15 10:59:59

我以前遇到过这个。发生这种情况是因为，当您离开页面时，浏览器开始卸载所有资源。这包括 .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);
}

I've run into this before. It's happening because, when you navigate away from the page, the browser starts to unload all the resources. This includes the .gif image, and it stops the animation.

I've found that using JavaScript to do an animation versus using an animated .gif will keep the animation going longer. Just make a sprite of the different frames and do something like this. In this example your sprite frames would go from left to right:

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

回复收藏 0 原文

~没有更多了~