WebView中gif动画的行为非常奇怪！！如何解决此问题? [英] The behavior of animated gif in WebView is very strange!!, how to fix this?

问题描述

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

I have an application with a WebView, where there's a long list of posts that Autoloads via Ajax when the user approaches the bottom of the scrollable area, so I display the word "Loading ... " and an animated GIF beside it created via Ajax Loader site.

问题在于，在具有Androind 2.3.5/2.3.6的某些设备中，此Gif有时会显示为静止图像，在其他设备中，其动画播放速度非常快，而在其他设备中，其动画播放速度却非常慢.

The problem is that this Gif sometimes appear as a still image in some devices with Androind 2.3.5/2.3.6, and in other devices its animation is extremely fast, and in other devices it's extremely slow.

例如装有操作系统的Galaxy S Mini:2.3.6(它显示为静止图像).

E.g. Galaxy S Mini with OS: 2.3.6 (it appears as a still image).

Galaxy S I9003操作系统:2.3.6(播放速度非常快).

Galaxy S I9003 with OS: 2.3.6 (it plays in a very very fast rate).

带操作系统的Galaxy S2:4.0.3(播放速度非常快，然后突然变得非常慢，但仍在制作动画).

Galaxy S2 with OS: 4.0.3 (It plays very fast then suddenly becomes extremely slow but it's still animating).

此问题是否有标准帧速率或其他解决方法?，

Is there a standard frame rate or any work-around for this issue ?,

这是我正在使用的图像:

Here's the image That I'm using:

------> < --------

------> <--------

我知道Facebook的应用程序正在Feed底部使用带有加载程序的WebView，但我不知道它是否为gif动画.

I know Facebook's app was using WebView with loader at the bottom of the feed but I don't know if it was animated gif or not.

我知道较旧的Android版本不支持动画GIF，但我正在谈论的是新版本

推荐答案

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

I had exactly the same problem and found no solutions! Animated GIF behavior seems really inconsistent across devices. That's the bad news. The good news is that I've made a work around, specifically for ajax loaders like yours.

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

You'll need to make separate image files for each frame of your GIF. It sounds horrible but it worked out ok for me - My 8 frame 8kb GIF turned into 8 png images totaling 11kb, and I got the bonus of 8bit transparency so I don't have to worry about the background color. It does mean the client has to make extra requests for the separate images though, so the fewer frames the better. I called the images 0.png, 1.png ... 7.png and put them in a folder to keep them neat.

现在输入代码！我将在下面解释.

Now the code! I'll explain it below.

HTML:

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

JavaScript(jQuery):

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设备，并且200ms +的间隔似乎可以正常运行，而不会破坏应用程序的性能.

First we have the img that we will animate. We use setInterval to change the image url to cycle through the frames. Really short intervals obviously put load on the device so we don't want to go nuts. I have a really cheap Android 2.2 device and 200ms+ intervals seem to work ok without wrecking app performance.

loaderKicker div可以使它在较旧的设备上工作(例如我们要定位的设备:)).当我们 all 更新图像网址时，Android似乎忽略了调用，因此我们通过更新隐藏的div的内容来解决此问题.我尝试始终使用"x"进行更新，但似乎内容实际上必须有所不同.幻灯片编号效果很好.

The loaderKicker div is there to make this work on older devices (like the ones we're targeting :) ). Android seems to ignore the calls when all we do is update an image url, so we get around this by updating the contents of a hidden div. I tried always updating with an "x" but it seems that the content has to actually be different. The slide number works well.

就这样！这有点繁琐，但可以在我测试过的所有内容(Android 2.2、2.3、4.0，iOS6，Firefox，IE，Chrome)上运行，如果只在一个ajax加载程序上进行操作，则可以似乎可以在任何地方使用.

So that's it! It's a bit of a hack job but it works on everything I've tested on (Android 2.2, 2.3, 4.0, iOS6, Firefox, IE, Chrome) and if you're only doing it on one ajax loader that you'll then use everywhere it seems ok.

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

The other, completely separate, solution is to animate the image using HTML5 canvases but I couldn't tell you anything about support for them in old devices.

这篇关于WebView中gif动画的行为非常奇怪！！如何解决此问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！