Crossbrowser APNG

Continuing the article APNG (animated PNG) in Google Chrome, Safari and IE , I want to say that the methods are certainly interesting but not cross-browser. In this article I will show how to make apng cross-browser.

Task

Display APNG in all popular browsers.

Decision

Using the idea of Animated PNG in Firefox, Opera and WebKit? Easy! I will also change the frames but with the help of css, which will allow to implement the method in all popular browsers.

Image preparation

The most interesting thing is that Photoshop does not understand APNG, I chose Japng Editor to solve this problem. This program is written in JAVA and requires the installed version of JAVA 6. It solves 2 main tasks: the conversion of personnel to APNG and back.
')
Download here .

Finished image

HTML

<div class="ajax-loader"><div> 

CSS

 .ajax-loader { width: 30px; /*   */ height: 30px; /*   */ background: url('ajax-loader.png') no-repeat; /*   */ } 

jquery.aimg.js

 (function ($) { $.fn.aimg = function (options) { options = $.extend({}, { speed: 150 }, options); return this.each(function () { var $el = $(this), $img = $('<img src="' + $(this).css('backgroundImage').replace(/(^url)|(["'()])/g, '') + '" style="position: absolute; left: -99999px;">'), currFrame = 1, slides; $img.load(function () { slides = $(this).width() / $el.width(); $(this).remove(); startAnimation(); }); $('body').append($img); function startAnimation() { return setInterval(function () { $el.css('backgroundPosition', '-' + currFrame * $el.width() + 'px 0px'); if (currFrame == slides) { $el.css('backgroundPosition', '0px 0px'); currFrame = 0; } currFrame++; }, options.speed); } }); } })(jQuery); 

jsFiddle example