Forum PHP.pl

po pewnym czasie masz wieeele razy odpaloną funkcję animuj i cyklicznie w postępie lawinowym podpinany setInterval(animuj,40000) - w tym miejscu co jest wystarczył by setTimeOut... lub troszkę inaczej to zapisać...

ps. nie potrzebnie wiele razy podpinasz .hover... prędzej byś skożystał z .delegate (coś jak .live)

ps2. skoro elementy #loga i #menu sa w drzewie DOM po .ready to mógłbyś te elementy wyszukać i zapamiętać w jakiejś zmiennej by ich nie szukać stale po selektorach CSS

ps3. jeśli elementy #menu nie zmieniają sie dynamicznie to wystarczyło by raz podpiąć .hover...

Ten post edytował zegarek84 2.05.2013, 14:01:37

To co Ty napisałeś już poprawniej powinno działać przy takim zapisie (minimalna modyfikacja tylko więc HOVER będzie przypisywany dodatkowo przy każdej animacji - tu też będzie minimalny wyciek pamięci ale większość by go pominęła...)

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(
  function(){
    function animuj(){
      $("#loga").animate(
      {
        backgroundPosition: "+=2000"
      }, 19000  //animacja paska na dole
      ).animate(
      {
        backgroundPosition: "-=2000"
      }, 19000  //animacja paska na dole
      );
 
      $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
 
      $("#menu p").hover( 									//animacja menu
        function(){
          $(this).prev().css("border-bottom-color","#363732");
          $(this).addClass("hover");
        },
        function(){
          if(!$(this).hasClass('active'))
            $(this).prev().css("border-bottom","#666 dotted 2px");
 
          $(this).removeClass("hover");
        }
        );
 
    }
    setInterval(animuj,40000);
    animuj();
  }
);
[JAVASCRIPT] pobierz, plaintext 

skoro hover wystarczy raz przypisać więc dla zobrazowania z zapamiętanym elementem do animacji kod można by zapisać w ten sposób (urzyta tutaj 1 zmienna globalna - można to inaczej zapisać...)

[JAVASCRIPT] pobierz, plaintext 
var jLoga;
function animuj(){
  jLoga.animate(
  {
    backgroundPosition: "+=2000"
  }, 19000  //animacja paska na dole
  ).animate(
  {
    backgroundPosition: "-=2000"
  }, 19000  //animacja paska na dole
  );
 
  $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
}        
$(document).ready(
  function start(){
    jLoga = $("#loga");
    $("#menu p").hover( 									//animacja menu
      function(){
        $(this).prev().css("border-bottom-color","#363732");
        $(this).addClass("hover");
      },
      function(){
        if(!$(this).hasClass('active'))
          $(this).prev().css("border-bottom","#666 dotted 2px");
 
        $(this).removeClass("hover");
      }
      );
    setInterval(animuj,40000);
    animuj();
  }
);
[JAVASCRIPT] pobierz, plaintext 

bez zmiennej globalnej można by np. w ten sposób - sposobów jest wiele i nie chcę narzucać rzadnego stylu, urzyta jest tutaj tylko dodatkowa anonimowa funkcja

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(
  (function(){
    var jLoga;
    function animuj(){
      jLoga.animate(
      {
        backgroundPosition: "+=2000"
      }, 19000  //animacja paska na dole
      ).animate(
      {
        backgroundPosition: "-=2000"
      }, 19000  //animacja paska na dole
      );
 
      $("p.active").prev("p").css("border-bottom-color","#363732"); //zmiana koloru ramki nad .active
    }
    function start(){
      jLoga = $("#loga");
      $("#menu p").hover( 									//animacja menu
        function(){
          $(this).prev().css("border-bottom-color","#363732");
          $(this).addClass("hover");
        },
        function(){
          if(!$(this).hasClass('active'))
            $(this).prev().css("border-bottom","#666 dotted 2px");
 
          $(this).removeClass("hover");
        }
        );
      setInterval(animuj,40000);
      animuj();
    }
    return start;
  })()
);
[JAVASCRIPT] pobierz, plaintext 

w tamtym miejscu gdzie wcześniej miałeś setInterwal prędzej pasowała funkcja setTimeout...

ps.
nie wiem czy p.active zmienia się dynamicznie czy nie więc nie buforowałem tych selektorów... ale jeszcze jeśli gdzieś zmieniasz klasę .active to można by zbuforować jakiś element nadrzędny nie zmieniający się z jakimś np. id i w jQuery skożystać z kontekstów, więc nie szukać tych elementów p.active w całym dokumencie HTML tylko podać kontekst - ale to już takie zagadnienia optymalizacyjne...

Ten post edytował zegarek84 2.05.2013, 16:41:41

1. w Google Chrome jest profiler (z którego się dopiero uczę korzystać, w zasadzie dzięki temu wątkowi, zmotywowałem się i zacząłem się bawić (Ctrl + Shift + J, wybierz zakładkę Profiles, dalej "Take Heap Snapshot"). Może coś odkryjesz.

2. zainteresowałbym się animacjami CSS3 (@keyframes etc.) zamiast jQuery.animate (nie wiem czy to rozwiąże twój problem z pamięcią, bo problem może być gdzie indziej, ale spróbowac można)

Ten post edytował PrinceOfPersia 2.05.2013, 23:04:41

podejrzałem dzisiaj kod na Twojej stronie i widzę, że zrobiłeś "misz masz..." - zwróć uwagę, że nie buforujesz wyszukiwanych elementów choć je przypisujesz do zmiennej gdyż masz przypisane do zmiennej wewnątrz funkcji... masz teraz 2 funkcje animuj o.O - oczywiście wywoływana jest ta z bliższym scope...