0

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

问题是这个 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，但我说的是新版本

4

1 回答 1

0

我遇到了完全相同的问题，但没有找到解决方案！动画 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 毫秒以上的时间间隔似乎可以正常工作，而不会破坏应用程序的性能。

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

就是这样了！这有点像 hack 工作，但它适用于我测试过的所有东西（Android 2.2、2.3、4.0、iOS6、Firefox、IE、Chrome），如果你只在一个 ajax 加载器上执行它，那么你将在任何地方使用似乎都可以。

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

于 2013-01-06T23:57:47.437 回答