Javascript-форум - Моргает Image (анимация сменой src)

Javascript-форум (https://javascript.ru/forum/)

- Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)

- - Моргает Image (анимация сменой src) (https://javascript.ru/forum/css-html-firefox-mizilla/41745-morgaet-image-animaciya-smenojj-src.html)

Моргает Image (анимация сменой src)

Добрый день!

Я делаю анимацию, меняя у Image src.
Есть 24 кадра - png-файла, каждый весит порядка 40Кб.
Каждые ~(1/24 секунды) я выставляю src на очередной кадр.

В FireFox изображение "моргает" (в других браузерах работает более-менее нормально).
На 3-х компах пробовал: 7-ка и XP.
Обновление версии, включение/выключение аппаратного ускорения не помогает...

Я скачал кадры на свой компьютер, сделал загрузку оттуда - ситуация не улучшилась.

Даже когда поставил задержку между кадрами в секунду, всё равно какое-то белое мерцание есть ...

Что здесь может быть?
Куда копать?
:help:

P.S. Наверняка, анимация сменой src у Image не лучший вариант.
Но я сильно ограничен выбором средств.
Есть фреймы в виде png, есть js, в который я "внедряю" свой объект.

Спасибо.

Цитата:

Сообщение от Баян

Есть 24 кадра - png-файла, каждый весит порядка 40Кб.

думаю, можно упаковать в одну "длинную" картинку (css спрайт), поместить ее в background-image и менять background-position

Цитата:

Сообщение от Яростный Меч (Сообщение 273908)

думаю, можно упаковать в одну "длинную" картинку (css спрайт), поместить ее в background-image и менять background-position

Спасибо, попробую запрототипировать - вдруг получится.

Такая идея с самого начала была.
Надеялись, что один большой png будет весить существенно меньше чем 24 похожих друг на друга кадра в сумме.
Поэкспериментировал - где-то меньше, но не кардинально.
Зато ждать надо пока всё это загрузится, прежде чем первый кадр показать. Поэтому тогда идею отклонили...

backgroundPositionY не срабатывает в FF

Написал проигрывание анимации изменением backgroundPositionY.
В IE, Opera работает, а в том самом FireFox - нет.
Судя по alert'у, backgroundPositionY устанавливается, но картинка не меняется.
Такое ощущение, что я какую-то галочку в этом FF не включил...

<html>
<head><title>Roll div 300</title></head>
<body width = 100 height = 100>
<div id="above_body" style="width:1600px; height:600px; background-image: url(roll_24.png); background-position: 0px 0px;"/>
<script type="text/javascript" >
    var node = document.getElementById("above_body");
    node.style.backgroundPositionY = 300;
    alert("backgroundPositionY = " + node.style.backgroundPositionY);
   //alert выдаёт 300, а картинка - не сдвинута. Только в FF
</script>
</body>
</html>

node.style.backgroundPosition = '0px 300px';

Спасибо!
Так работает и мерцания вроде нет, кажется.
Пока на прототипе, надеюсь и по-настоящему тоже нормально будет.

:thanks: