[jQuery] animacja w chrome, firefox oraz IE, Wydajność animacji w przeglądarkach Opcje

[blady101]

Witam

Animuję 5 obiektów (3 x div, 2 x img) każdemu zmieniam tylko szerokość i wysokość. W Chrome działa perfekcyjnie. W Firefox 9 już gorzej, a w Internet Explorerze 8 szkoda słów. Potworne lagi.

Da się to jakoś zoptymalizować? Wiem, że 5 animacji to sporo, ale powiększam tylko rozmiary. Skalowanie dwóch obrazków jest tak kosztowne? Może słyszał ktoś o jakichś sposobach optymalizacji. Kod:

CODE

<div class="line">

<div><table><tr><td>
<img src="dsf.png"/>
</td></tr></table></div>

<div><table><tr><td>
<img src="dsf.png"/>
</td></tr></table></div>

</div>

Skaluję wszystkie trzy divy i oba obrazki.

Dodam, że zależy mi najbardziej na tym, by na firefoxie działało lepiej. I jeszcze Opera, animacje ma ok, ale jeszcze animuję główny suwak strony, i już działa skokowo. Skąd takie ustrojstwo?

Ten post edytował blady101 29.12.2011, 23:16:36

[wookieb]

A po co bezsensownie wsadasz je w tabele?
Poza tym możesz uzyć http://playground.benbarnett.net/jquery-animate-enhanced/

[blady101]

W table to wrzucam by wycentrować w pionie zawartość. Najlepsza metoda, działa najpłynniej na najpopularniejszych przeglądarkach. Tak przynajmniej wychodziło jeśli chodzi o mój kod.

Co do tego pluginu to bardzo ciekawy, ktoś się musiał nieźle napocić. Niestety u mnie poprawia się tylko na Chromie gdzie i tak mam już dobrą jakość, i na Operze, co jest dla mnie mało istotne. Na Firefox na którym mi zależy się pogoszyło, tak samo na IE.

Ten post edytował blady101 29.12.2011, 23:23:58

[wookieb]

A jakiej wersji jquery używasz?
Poza tym spróbuj http://microjs.com/#jsanimation
O ile dobrze pamiętam to jquery nie wspiera requestAnimationFrame więc animacje nie zawsze będą płynne...
Poza tym jakbyś wystawił to na jsfiddle aby można było potestować byłoby fajnie

Powód edycji: [wookieb]:

[blady101]

Używam jQuery 1.6.4

[prowseed]

Próbowałeś animacji w css3?

[blady101]

Załadowałem już plugin o którym wspomniał wookieb. Miał on dostosowywać jeśli to możliwe animację do CSS3, ale pogorszyło to tylko sprawę.

Ten post edytował blady101 29.12.2011, 23:40:59

[prowseed]

Nie, napisz sobie po prostu animacje w css3, najszybciej:

[CSS] pobierz, plaintext 
 img:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
[CSS] pobierz, plaintext 

Ten post edytował prowseed 29.12.2011, 23:56:02

[erix]

O ile dobrze pamiętam to jquery nie wspiera requestAnimationFrame więc animacje nie zawsze będą płynne...

http://bugs.jquery.com/ticket/8101

Animuję 5 obiektów (3 x div, 2 x img) każdemu zmieniam tylko szerokość i wysokość. W Chrome działa perfekcyjnie. W Firefox 9 już gorzej, a w Internet Explorerze 8 szkoda słów. Potworne lagi.

Skalowanie obrazków, niestety, daje najbardziej popalić. Wiele zależy tu od konfiguracji przeglądarki - w Chrome chyba domyślnie jest wykorzystywane dopalanie GPU, dlatego działa płynnie; do tego dochodzi sposób interpolacji (niektóre wygładzają, niektóre nie).

Puść gdzieś to na żywo, wtedy coś więcej będzie można powiedzieć.

[wookieb]

http://bugs.jquery.com/ticket/8101

Już to widziałem ale... http://code.jquery.com/jquery-1.7.1.js i znajdź wystąpienie słowa "requestAnimationFrame"

[blady101]

We firefoxie cały czas mam włączone wspomagania sprzętowe. Więc to chyba wynika z jakości przeglądarki i wsio. Gdy chociaż udało się upłynnić animację scrollowania strony. Niestety nie mogę pokazać ani oryginalnego kodu, ani uploadować to gdzieś i pokazać. Może ktoś wie coś na temat animacji scrolla w firefoxie? Kod JS wygląda tak:

CODE

$('html,body').animate(
{
scrollTop: pos_y
},
{
duration: speed_y,
easing: 'linear'
}
);

Dałem linear bo bajerów nie potrzebuję, a trochę to usprawniło działanie, jednak nadal za mało. Strona przewija się ewidentnie skokowo. Co jest cholernie dziwne, bo jak to wyłączę i sam przewijam to jest płynnie. Kompletnie bez sensu.

EDIT:

Płynność w Firefoxie osiągnięta! (IMG:style_emoticons/default/zakochany.gif)

Podczas animacji ustawiam w kaskadzie styli parametr image-rendering na optimizeSpeed a po animacji przywracam na optimizeQuality. I wszystko pięknie gra!

Nie co przyśpieszyłem też na IE robiąc to samo ale z parametrem -ms-interpolation-mode. Jednak nadal muli że cholera bierze.

Ten post edytował blady101 30.12.2011, 13:04:19