Кроссбраузерный APNG

Продолжая статью APNG (анимированный PNG) в Google Chrome, Safari и IE, хочу сказать, что методы конечно интересные но не кроссбраузерные. В данной статье я покажу как сделать apng кроссбраузерным.

Задача

Отобразить APNG во всех популярных браузерах.

Решение

Используя идею Анимированный PNG в Firefox, Opera и WebKit? Легко! я буду тоже менять кадры но с помощью css, что позволит реализовать метод во всех популярных браузерах.

Подготовка изображения

Самое интересное начинается с того, что Photoshop не понимает APNG, для решения этой проблемы я выбрал Japng Editor. Данная программа написана на JAVA и требует установленной версии JAVA 6. Она решает 2 основные задачи: конвертация кадров в APNG и обратно.

Скачать можно здесь.

Готовое изображение

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 пример