2011-08-01 7 views
2

(私は1.6.2を使用しています):このjQueryスクリプトを修正/改造する方法はありますか?それで、メモリを消費して高速化することができますか?私はjQueryのに新しい、私はそれをスライドカルーセルを作っていたことだし、私はここで何かを見逃している場合ので、私のスクリプトを見てみてください知らない

function gotoItem(main, hidden, con, speed, state) { 
con.css('display', 'none'); 
switch(state) { 
    case 'next' : 
    main.children(':first').appendTo(hidden).css('left','0px'); 
    hidden.children(':first').appendTo(main).css('left', '730px'); 
    lmove = '-=120px'; 
    middle = 3; 
    end = 6; 
    break 
    case 'prev' : 
    main.children(':last').prependTo(hidden).css('left', '0px'); 
    hidden.children(':last').prependTo(main).css('left', '-230px'); 
    lmove = '+=120px'; 
    middle = 3; 
    end = 6; 
    break; 
} 

main.children().each(function(i) { 
    if(i==end) { 
     $(this).stop().animate({ 
     left: lmove 
     }, speed, function() { 
     con.css('display', 'block'); 
     }); 
    } else { 
     if(i==middle) { 
      $(this).stop().animate({ 
      left: lmove, 
      opacity : 1 
      }, speed); 
     } else { 
      $(this).stop().animate({ 
      left: lmove, 
      opacity : 0.3 
      }, speed); 
     } 
    } 
    }); 
} 

実際にコードに問題はありませんが、スクリプトが大量のメモリ(関数が実行されるたびに約100kb)を食べていることが分かり、CPUが20倍-30%(私はシングルコアのラップトップを使用しており、ブラウザはChrome 12です)。私はFirefoxでそれをテストしており、結果は基本的に同じです。だから、どんな提案?スクリプトの書き換えを速くする/メモリリークを減らすにはどうすればよいですか?それとも、スクリプトで何ができるの?事前にありがとう

答えて

1

左のプロパティをアニメートすると常にメモリが消費されます。むしろoverflow:hidden;の上にあるdivを使用してから、.scrollLeft()を使用してスライドをアニメーション化することができます。

これは、すでにあなたがリソースを節約することができます別のポイントに私たちを取るjQuery for Designers - Fun with overflows

を参照してください。ブラウザーが後でレンダリングしなければならないアイテムを追加したり追加したりする代わりに、最初にコンテンツをロードし、視界から外してください。これは明らかにパフォーマンス対負荷時間の決定であり、全体的なパフォーマンスにはそれほど印象的ではないかもしれませんが、一般的に言えば、ローエンドのマシンをターゲットにすると、Domの操作が避けられます。

+0

興味深い!私はscrollLeftメソッドを試していないし、実際にメモリを消費していないのであれば、本当に感謝しています。そしてデザイナーのためのjQueryのことはかなり妥協しています。本当に価値がある!ありがとうございました – iwakuya

関連する問題

 関連する問題