Question

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.

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.

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

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

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:

——> <——–

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.

I know that older versions of Android didn’t support animated GIFs but I’m talking about new version

Answer 1

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.

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):

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

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.

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.

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.

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.