Firefox блинкует блок при смене фоновой картинки

[antonKar]

Есть Firefox последней версии, он отображает страницу, в которой есть блок с фоновой картинкой. На странице есть ещё фоновые картинки, они прогружены заранее и даже отрисованы браузером. Картинки здоровые по высоте, от 3000 до 7000 пикселей (спрайтовая анимация).

При определённых состояниях страницы я меняю через JS background-position и background-image у блока, и примерно в половине случаев Firefox как будто заново загружает новую картинку: старая картинка пропадает, а новая появляется через несколько долей секунды, прям ощутимо заметных глазу.

Хотя, повторюсь, все картинки загружены и отрисованы.

Кто-нибудь сталкивался с таким, если да, то как решали? В webkit/blink и IE всё нормально.

Edited July 9, 2015 by antonKar

[afdw]

А зачем менять background-image для анимации?

[antonKar]

Потому что на странице несколько спрайтовых анимаций в одном блоке

Edited July 9, 2015 by antonKar

[afdw]

А если разделить блок на несколько?

[wwt]

Потому что на странице несколько спрайтовых анимаций в одном блоке

спрайты большого размера, при рендеринге задержка. логично же?

 

Может есть смысл внутрь блока положить для каждого спрайта свой блок и заместо смены background-image скрывать один блок и показывать другой?

[antonKar]

А если разделить блок на несколько?

Я конечно рассматриваю вариант попробовать разделить блок на отдельных 10 блоков, у каждого из которых своя фоновая картинка, но это на крайний вариант, ибо менять html-структуру и JS ради одного не IE браузера чёт не оч.

[antonKar]

В общем разделение одного блока на 12 разных блоков и смена их отображения через autoAlpha в TweenMax помогла избавиться от "промаргивания", в остальных браузерах тоже всё норм. Всем спасибо.

 

 

спрайты большого размера, при рендеринге задержка. логично же?

Вообще не очень логично. Какая разница какого размера спрайт, если он уже был прогружен в память? И в других браузерах ведь всё нормально работает.

Edited July 14, 2015 by antonKar