0

私は最近、window.scroll を使用して「アクティブ」のクラスを要素に追加し、css3 アニメーションをトリガーする Web サイトを作成しました。ただし、これらのアニメーションは起動しないことがあり、全体としてスクリプトのパフォーマンスは非常に遅かったです。今日、私はFirefoxのパララックスサイト を見ていましたが、彼らが「トリガー」を見逃すことはなく、パフォーマンスも良好であることに気付きましたが、どうやってこれを達成したのかわかりません.このようなサイトの経験はありますか?

私のコードは現在このように見えます...

$(window).scroll(function(){    
    if ( $('.trigger:in-viewport:first.trigger5').length )
    {
        $('[rel=counter]').addClass('active');
        $('[rel=discover]').removeClass('active');
        $('[rel=follow]').removeClass('active');
        $('[rel=sync]').removeClass('active');
    }

jQueryとビューポートプラグインの使用だと感じています..

4

3 に答える 3

0

今のところ dom-heavy 呼び出しを無視すると、scroll() の連射のおかげで、全体的なパターンは非常に CPU 負荷が高くなります。

特にモバイルやその他の弱いデバイスでは、CPUの大幅な削減のために常にではなく頻繁に呼び出すことができます。

function doScroll(){    
    if ( $('.trigger:in-viewport:first.trigger5').length )
    {
        $('[rel=counter]').addClass('active');
        $('[rel=discover]').removeClass('active');
        $('[rel=follow]').removeClass('active');
        $('[rel=sync]').removeClass('active');
    }
}

$(window).scroll(function dome(){
  clearTimeout(dome.timer);
  dome.timer=setTimeout(doScroll, 100);
})

これは 10FPS のフレームレートに当てはまります。setTimeout の期間を変更して自由に調整してください。

jQuery セレクターをキャッシュすることも役立つかもしれませんが、scroll() を過剰に起動している場合、各実行で 25% を節約するだけではおそらく十分ではありません。

于 2013-10-09T20:16:26.073 に答える