StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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.</p> <p>Now the code! I'll explain it below.</p> <p>HTML:</p> <pre><code><img src="images/loader/0.png" id="headLoader" /> <div id="loaderKicker" style="visibility:hidden;"></div> </code></pre> <p>JavaScript (jQuery):</p> <pre><code>var loaderImg = $("#headLoader"); var loaderProg = 0; setInterval(function() { $("#loaderKicker").html(loaderProg); loaderImg.attr("src", "images/loader/"+loaderProg+".png"); loaderProg = (loaderProg+1)%8; }, 300); </code></pre> <p>First we have the <code>img</code> that we will animate. We use <code>setInterval</code> 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.</p> <p>The <code>loaderKicker</code> div is there to make this work on older devices (like the ones we're targeting :) ). Android seems to ignore the calls when <em>all</em> 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.</p> <p>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.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload