Pull to refresh

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

Website development *
Sandbox
Продолжая статью 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 пример
Tags:
Hubs:
Total votes 1: ↑1 and ↓0 +1
Views 2.7K
Comments 8
Comments Comments 8