4

私は自分のウェブサイトの刷新に取り組んでいます、そして新しいものはhttp://beta.namanyayg.com/で見つけることができます

サイトのスクロールに関連する主なものは2つあります。

  • ユーザーが表示している「ページ」を確認するには、上部のオフセットとスクロール位置を計算してから、ページにクラスを追加します。
  • メニューをクリックしてスムーズにスクロールするには。

私は両方のコードを書きましたが、多くのラグがあります。

最初のものはほとんど常に遅れをもたらします。結果として、2番目のものも遅れます。スムーズなスクロールであるかどうかを確認するためのブール値を含め、通常のスクロールイベントを無効にしましたが、あまり変更はありません。

ラグがない（または少なくとも少なくなる）ようにパフォーマンスを改善する方法についてアドバイスはありますか？前もって感謝します！:)

...それともJSとはまったく関係ありませんか？私は他のすべてを最適化しました...

編集： http：//beta.namanyayg.com/js/main.jsでUnminified JS

4

4 に答える 4

2

アンダースコアを使用している場合は、この種のことに優れた素晴らしい_.debounce機能があります。

于 2013-07-12T13:43:13.310 に答える
1

ユーザーがページの上部からどれだけスクロールしたか（つまり、現在どの「ページ」にいるのか）を確認するには、次の方法で実行できます。

$(window).scroll(function () { 
    var scrollAmount = $(window).scrollTop(); // in pixels

    if(scrollAmount > SOME_AMOUNT)
    {
       // add required css class
    }
});

たとえば、あるIDまでスムーズにスクロールするには、次を使用できます。

$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);

これらは両方ともjQueryソリューションであるため、jqueryライブラリを含める必要があります。これらの計算を実行するウェイポイントと呼ばれる優れたjQueryプラグインもあります。それはあなたにとって有用であることがわかるかもしれません、そしてそれは他のいくつかの素晴らしい機能と例を持っています。

于 2012-12-30T09:42:00.847 に答える
0

私も同じ問題を抱えてる。私は何千もの小さなdivを持つスクロール可能なdivを持っています。scrollTopを呼び出してスクロール位置を取得または設定するたびに、少なくとも1秒待機することがあります。

私はこれらのスライドを読みました：http：//www.slideshare.net/nzakas/high-performance-javascript-2011（特にスライド138-139）そして今私はscrollTopへのすべての呼び出しがゲッターとしてさえjavascriptリレーアウトをすることに気づきますページ。これが遅延の原因である可能性が最も高いですが、残念ながら、リレーアウトを発生させずにscrollTopを呼び出す方法のように、まだ解決策を見つけていません。

注：私はChromeでのみテストしています。

この記事の「ブラウザは賢い」セクションも読んでください：http ：//www.phpied.com/rendering-repaint-reflowrelayout-restyle/

于 2013-07-12T12:54:56.227 に答える
0

scrollTopを取得することで、ラグの簡単な解決策を見つけました。スクロールハンドラー内で呼び出して、結果を変数に保存するだけです。

たとえば、jQueryの場合：

var scrollPos = 0,
    element = $('.class');

element.scroll(function(){
    scrollPos = element.scrollTop();  
});

2番目の問題であるscrollTopの設定では、表示されている要素のみを表示することでDOM要素の量を減らしました。この場合、表示されているページのみがDOMに追加されていることを確認してください。次のページにスクロールするときは、スクロールハンドラーで一番上のページを削除し（jQuery .detachを使用）、次のページをDOMに追加します。

于 2013-07-16T13:03:15.237 に答える