WebView 中的动画 gif 的行为很奇怪！！，如何解决这个问题？

Question

我有一个带有 WebView 的应用程序，其中有一长串帖子，当用户接近可滚动区域的底部时，这些帖子会通过 Ajax 自动加载，所以我在旁边显示“正在加载...”这个词和一个动画 GIF通过 Ajax Loader 站点创建。

问题是这个 Gif 有时在某些装有 Android 2.3.5/2.3.6 的设备中显示为静止图像，而在其他设备中它的动画非常快，而在其他设备中则非常慢。

例如带有操作系统的 Galaxy S Mini：2.3.6（显示为静止图像）。

Galaxy S I9003 操作系统：2.3.6（播放速度非常快）。

带有操作系统的 Galaxy S2：4.0.3（播放速度非常快，然后突然变得非常慢，但仍在动画中）。

是否有标准帧速率或任何解决此问题的方法？，

这是我正在使用的图像：

----->

我知道 Facebook 的应用在提要底部使用带有加载器的 WebView，但我不知道它是否是动画 gif。

我知道旧版本的 Android 不支持动画 GIF，但我说的是新版本

Answer 1

我遇到了完全相同的问题，但没有找到解决方案！动画 GIF 行为在不同设备之间似乎确实不一致。这就是坏消息。好消息是我已经解决了问题，特别是针对像您这样的 ajax 加载程序。

您需要为 GIF 的每一帧制作单独的图像文件。这听起来很可怕，但对我来说效果还不错——我的 8 帧 8kb GIF 变成了 8 个总计 11kb 的 png 图像，而且我得到了 8 位透明度的奖励，所以我不必担心背景颜色。这确实意味着客户端必须对单独的图像提出额外的请求，因此帧越少越好。我将图像命名为 0.png、1.png ... 7.png 并将它们放在一个文件夹中以保持它们整洁。

现在是代码！我会在下面解释。

HTML：

<img src="images/loader/0.png" id="headLoader" />
<div id="loaderKicker" style="visibility:hidden;"></div>

JavaScript (jQuery)：

var loaderImg = $("#headLoader");
var loaderProg = 0;
setInterval(function() {
    $("#loaderKicker").html(loaderProg);
    loaderImg.attr("src", "images/loader/"+loaderProg+".png");
    loaderProg = (loaderProg+1)%8;
}, 300);

首先我们有img，我们将对其进行动画处理。我们使用setInterval 来更改图像url 以循环浏览帧。很短的时间间隔显然会给设备带来负担，所以我们不想发疯。我有一个非常便宜的 Android 2.2 设备，而且 200 毫秒以上的时间间隔似乎可以正常工作，而不会破坏应用程序的性能。

loaderKicker div 可以在较旧的设备（例如我们的目标设备：）上进行这项工作。当我们所做的all 是更新图像 url 时，Android 似乎会忽略调用，因此我们通过更新隐藏 div 的内容来解决这个问题。我尝试总是用“x”更新，但似乎内容实际上必须不同。幻灯片编号效果很好。

原来如此！这有点骇人听闻，但它适用于我测试过的所有东西（Android 2.2、2.3、4.0、iOS6、Firefox、IE、Chrome），如果你只在一个 ajax 加载器上执行它，那么你将在任何地方都可以使用。

另一个完全独立的解决方案是使用 HTML5 画布为图像设置动画，但我无法告诉您有关旧设备对它们的支持的任何信息。