I have an animated gif that I want to display any time a page is loading. When I view the image outside of a browser, the image loops infinitely and works just fine, but whenever I'm displaying the image in a browser, the animation only loops once. Does anyone have any suggestions for making the image loop infinitely?
Currently I'm just doing this to make the image appear which does make it appear, but only loops once:
document.getElementById('ajaxloader').innerHTML = '<img src="images/ajax-loader.gif" title="Loading, please wait..">';
Open the Animated gif in Photoshop. Go to the Window tab and select timeline(if the timeline is not already open). At the bottom of the timeline panel, you will find an option, which says "Forever". Change that to "Once".
Select “Make Frames From Layers” option. Open the “File” menu, and then select “Save for Web & Devices.” Set the save format to "GIF," then use the “Looping Options” drop-down menu to select “Forever” to cause the GIF to continuously loop.
I was facing the same problem with my GIF encoder/decoder class I wrote some time ago (and improving from time to time). I found out the solution for this just yesterday. The GIF is completely fine the problem is on a modern internet browser's side. Affected browsers are Opera, IE, and Chrome (didn't test others).
After some investigation on the matter (by comparing looping and non-looping images), I found out that these browsers' GIF decoders are ignoring the looping parameters in GIF files. Instead they are depending on an undocumented application extension in the first frame of GIF file.
So the solution is to add this extension command just before first frame image data. Add this chunk:
0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00
This will force browsers to loop endlessly.
Here is an example:
Hex view so you see how it is added:
The GIF is not sensitive on inserting/reordering non-image chunks of data, so you can insert this before the first image in any place between any other extension. I put it directly after header + palette. Which can be done with C++ or any other language (no re-encoding is needed). For more info see:
[Edit by Reed Dunkle]
You can also do it manually with a Hex Editor. I used "Hex Fiend" on macOS Sierra.
Search for 21 F9
in the beginning portions of hex (this is the header). In the photo above, it is 21 F9 04 04 00 00 00 00
. Yours could be slightly different, but notice it comes before 2C
, which marks the beginning of an image block.
Before the 21 F9
... portion, insert the following hex, marked as the "application extension" in the photo above:
21 FF 0B 4E 45 54 53 43 41 50 45 32 2E 30 03 01 00 00 00
Save, and test it.
Addon by Spektre: Beware: 21 F9
marks gfx extension chunk which is optional so it may not be present for all or any frames (but that is really rare these days).
You can use the gifsicle command line tool to process an animated gif and add in the correct looping that is compatible with all browsers:
Animation options: -l, --loopcount[=N] Set loop extension to N (default forever).
so in Terminal I do:
$ gifsicle --loopcount problem.gif > fixed.gif
Which produces a new Animated GIF that works in Chrome & Firefox as well as Safari.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With